/* ==========================================================================
   YAZHI — DESIGN TOKENS (vanilla PHP build)
   Values match the brief exactly. "Dark Gray" wasn't given a hex value in
   the brief, so I've picked #4A4A4A — a standard, accessible dark gray
   that pairs well with pure black headings. Change it here if you'd
   rather use a specific value.
   ========================================================================== */

:root {
    /* ---- Brand colour system (fixed — do not extend without sign-off) ---- */
    --yazhi-maroon: #6E1727;
    --yazhi-deep-maroon: #4A0F1A;
    --yazhi-light-maroon: #8C2A3A;

    --yazhi-gold: #C9A24A;
    --yazhi-dark-gold: #A97C22;
    --yazhi-light-gold: #E5C875;

    --yazhi-ivory: #F8F4EA;
    --yazhi-off-white: #FCFAF5;

    --yazhi-black: #000000;
    --yazhi-dark-gray: #4A4A4A;
    --yazhi-white: #FFFFFF;
    --yazhi-light-gray: #E8E4DC;

    /* ---- Semantic aliases (use these in components) ---- */
    --color-bg: var(--yazhi-off-white);
    --color-bg-alt: var(--yazhi-ivory);
    --color-surface: var(--yazhi-white);
    --color-text: var(--yazhi-dark-gray);
    --color-text-muted: var(--yazhi-dark-gray);
    --color-heading: var(--yazhi-black);
    --color-border: var(--yazhi-light-gray);
    --color-accent: var(--yazhi-gold);
    --color-accent-dark: var(--yazhi-dark-gold);
    --color-danger: #8C2A2A;
    --color-success: #3E6B3E;

    /* Aliases kept for compatibility with the ported CSS modules
       (they reference --yazhi-burgundy / --yazhi-soft-black etc.) */
    --yazhi-burgundy: var(--yazhi-maroon);
    --yazhi-deep-burgundy: var(--yazhi-deep-maroon);
    --yazhi-light-burgundy: var(--yazhi-light-maroon);
    --yazhi-soft-black: var(--yazhi-black);
    --yazhi-gray: var(--yazhi-dark-gray);

    /* ---- Status colours (kept inside the family — no random hues) ---- */
    --status-draft: var(--yazhi-dark-gray);
    --status-review: var(--yazhi-dark-gold);
    --status-verified: var(--yazhi-light-maroon);
    --status-published: #3E6B3E;
    --status-archived: #4A4A4A;

    /* ---- Typography ----
       Primary picks from the brief's own lists: Playfair Display (serif
       display) + Inter (sans body/UI). Cormorant Garamond / Montserrat
       are solid alternates if you want a different feel later — just
       swap the font-family values below and the Google Fonts link in
       includes/header.php. */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
    --fs-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
    --fs-xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
    --fs-2xl: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem);
    --fs-3xl: clamp(2.75rem, 2.1rem + 2.8vw, 5rem);

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

    /* ---- Spacing (fluid) ---- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: clamp(0.75rem, 0.7rem + 0.3vw, 1rem);
    --space-sm: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    --space-md: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
    --space-lg: clamp(2.25rem, 1.7rem + 2.2vw, 4rem);
    --space-xl: clamp(3rem, 2rem + 4vw, 6rem);
    --space-2xl: clamp(3.5rem, 2.2rem + 5.5vw, 7.5rem);

    /* ---- Layout ---- */
    --container-max: 1280px;
    --container-narrow: 860px;
    --container-padding: clamp(1rem, 3vw + 0.3rem, 2.75rem);

    /* ---- Radius / shadow / motion ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 14px rgba(74, 15, 26, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 14px 40px rgba(74, 15, 26, 0.16);
    --shadow-gold: 0 6px 18px rgba(201, 162, 74, 0.28);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms var(--ease);
    --transition-base: 260ms var(--ease);
    --transition-slow: 420ms var(--ease);

    --header-height: 76px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
}