/* =========================================================
   anagura-base.css (v2.0 - Adapted)
   This file provides core design tokens (CSS variables)
   and global element resets used across all Anagura
   WordPress themes. Keeping the variables here allows
   child themes to remain lightweight while still inheriting
   the colour palette, typography and basic element
   styling from the original Anagura v2.3 design.

   NOTE: The root variables defined below mirror those
   found in the original "Anagura (New Web) v2.3" design
   specification. Additional variables can be added here
   if future themes require more colours or spacing.

   No layout-specific rules (such as flexbox or grid
   definitions) should be placed in this file. Those belong
   in the page‑level theme stylesheets (e.g. blog-theme.css,
   dict-style.css, etc.).
   ========================================================= */

/* --- 1. DESIGN TOKENS (Variables from ALL files) --- */
:root {
    /* Base tones for typography and backgrounds */
    --ink: #2a1e1a;
    --ink-soft: #5a4943;
    --paper: #fdfcf9;
    --bg-tan: #f0e9dd;
    --bg-deep: #1b1412;
    --bg-db-deep: #6a3f1f;

    /* Main accents used throughout navigation and buttons */
    --wood-orange: #e07a00;
    --wood-dark: #5a3a22;
    --text-dark: #3b2411;
    --text-light: #ffffff;
    --sky-blue: #005a9c;

    /* Secondary accents */
    --accent-gold: #d4af37;
    --accent-novel: #d77b18;
    --accent-novel-deep: #9a3900;
    --accent-db: #e86f24;
    --accent-highlight: #efc95a;

    /* Miscellaneous design tokens */
    --line-gray: #d9d4ce;
    --radius-main: 14px;
    --radius-small: 8px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-hard: 0 14px 34px rgba(0, 0, 0, 0.35);
    --max-width-content: 1200px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. GLOBAL ELEMENT RESET & TYPOGRAPHY --- */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text-dark);
    background-color: var(--paper);
    font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}

p {
    margin: 0 0 1rem 0;
}

a {
    color: var(--wood-orange);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: var(--accent-novel-deep);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    margin: 1.5rem 0 1rem 0;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wood-orange);
}

/* Serif title style (used for page titles) */
h1.page-title-serif {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--text-dark, #3b2411);
    font-family: "Noto Serif JP", ui-serif, Georgia, serif;
    letter-spacing: 0.02em;
    flex: 1;
    text-align: left;
}

/* FIX: Make title links inherit the h1 color */
h1.page-title-serif a {
    color: inherit;
    text-decoration: none;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    padding-left: 1.5rem;
    margin: 0 0 1rem 0;
}

/* Utility class to remove default list styles */
.list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}