/*
 * Global Design Tokens — Golden Honey Brand Edition
 * Strict CSS Custom Properties Registry
 * Palette source: BRAND_MANUAL_Golden_Honey.md
 */

/* ── Brand display face: Fraunces (self-hosted) ──────────────────────────────
 * The brand manual names Fraunces as the display/editorial typeface. The strict CSP
 * (font-src 'self') forbids external font CDNs, so the font is SELF-HOSTED: drop the
 * variable woff2/ttf files into /assets/fonts/ (see that folder's README). Until then
 * --font-display falls back to Georgia. Declared at the document level so it is
 * available inside the components' shadow roots too. */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;            /* variable wght axis */
    font-display: swap;
    src: url('/assets/fonts/Fraunces.ttf') format('truetype');
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;            /* variable wght axis */
    font-display: swap;
    src: url('/assets/fonts/Fraunces-Italic.ttf') format('truetype');
}

:root {
    /* ── Brand Palette ───────────────────────────────────────────────────────── */
    --color-warm-white:    #FDFAF2;
    --color-honey:         #E8C97A;
    --color-honey-light:   #F5E6CE;
    --color-sage:          #8FAF8A;
    --color-sage-dark:     #4A6E44;
    --color-sage-light:    #C8D8C4;
    --color-parchment:     #F5EDD5;
    --color-parchment-dark:#A08C60;
    --color-amber:         #B07D2A;
    --color-warm-ink:      #2C2418;
    --color-ink-light:     #6B5C40;

    /* ── Semantic Tokens — Light Theme ──────────────────────────────────────── */
    --color-bg-primary:    #FDFAF2;   /* Warm White — dominant surface          */
    --color-bg-secondary:  #F5EDD5;   /* Parchment — cards, panels, dividers    */
    --color-text-primary:  #2C2418;   /* Warm Ink — headings, body              */
    --color-text-secondary:#6B5C40;   /* Ink Light — captions, muted labels     */
    --color-border:        #E8C97A;   /* Honey — subtle dividers, outlines      */
    --color-accent:        #B07D2A;   /* Amber — primary CTAs, links, actions   */
    --color-success:       #4A6E44;   /* Sage Dark — confirmed, positive states */
    --color-error:         #A32D2D;   /* Error — alerts, sparingly              */
    --color-accent-ring:   rgba(176, 125, 42, 0.25); /* Amber focus ring       */
    --color-accent-subtle: rgba(176, 125, 42, 0.08); /* Amber wash — panel headers, icon-strip hover/pressed (was an undefined token falling back to a cool blue) */
    --glass-bg:            rgba(253, 250, 242, 0.88);

    /* ── Previously-PHANTOM tokens — defined 2026-07-23 ──────────────────────────
       These three were referenced 30+ times across the workspace panel sheets and
       NEVER defined anywhere (grep-verified), so every use silently resolved to the
       inline hex fallback. That was survivable in light theme but broke dark theme:
       the workspace "selected" fills are color-mix(honey 55-60%, --color-surface-sunken),
       so the fallback kept a near-WHITE ground under a honey accent, measuring 1.14:1
       for the active tile label — effectively invisible.

       LIGHT values below are byte-identical to the fallbacks they replace, so light
       theme is pixel-unchanged by design (render-verified). Only DARK gains real
       values. Do not "improve" the light values without a render check — they are
       load-bearing for every selected state in the Cover panels. */
    --color-surface-sunken: #f1efe9;  /* recessed wells, selected-fill mix base       */
    --color-surface-alt:    #f5f5fa;  /* alternate surface — base sheet only          */
    --color-text-muted:     #888888;  /* de-emphasised readouts                       */

    /* ── Workspace Rulers — neutral silver scale (decoupled from warm ink) ───── */
    /* The canvas rulers read in a cool silver so measurement chrome stays quiet  */
    /* against the warm artboard. Shared across all workspaces (Cover/ArtContent).*/
    --color-ruler-track:   #ECECEF;   /* ruler gutter background                 */
    --color-ruler-tick:    #C2C2CB;   /* minor subdivision ticks (silver)        */
    --color-ruler-major:   #9A9AA6;   /* whole-unit major ticks (darker silver)  */
    --color-ruler-label:   #8A8A96;   /* unit numerals (gray)                    */
    --color-ruler-zero:    #6C6C78;   /* origin (0) line — strongest silver      */

    /* ── Spacing System ─────────────────────────────────────────────────────── */
    --space-xs:      0.25rem;  /*  4px — icon gaps, tight inline              */
    --space-sm:      0.5rem;   /*  8px — component internal gaps              */
    --space-md:      1rem;     /* 16px — between UI elements                  */
    --space-lg:      1.5rem;   /* 24px — between sections within a card       */
    --space-xl:      2.5rem;   /* 40px — between major sections               */
    --space-xxl:     3rem;     /* 48px — generous section separation          */
    --space-section: 4rem;     /* 64px — page-level vertical rhythm           */

    /* ── Typography ─────────────────────────────────────────────────────────── */
    --font-display: 'Fraunces', Georgia, serif;
    --font-ui:      'Inter', -apple-system, system-ui, sans-serif;

    /* ── Shadows ────────────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 4px rgba(44, 36, 24, 0.06);
    --shadow-md: 0 4px 24px rgba(44, 36, 24, 0.08);
    --shadow-lg: 0 8px 40px rgba(44, 36, 24, 0.14);

    /* ── Motion ─────────────────────────────────────────────────────────────── */
    --transition-base:   0.2s ease-out;
    --transition-page:   0.4s ease-out;
    --transition-reveal: 0.6s ease-out; /* Style transformation wipe           */
}

:root[data-theme="dark"] {
    /* ── Semantic Tokens — Dark Theme ───────────────────────────────────────── */
    --color-bg-primary:    #2C2418;   /* Warm Ink as background                */
    --color-bg-secondary:  #3D3020;   /* Slightly lifted warm dark surface     */
    --color-text-primary:  #FDFAF2;   /* Warm White as primary text            */
    --color-text-secondary:#F5EDD5;   /* Parchment as secondary text           */
    --color-border:        #4A3A28;   /* Muted warm border for dark surfaces   */
    --color-accent:        #E8C97A;   /* Honey as CTA on dark backgrounds      */
    --color-success:       #8FAF8A;   /* Sage for success on dark              */
    --color-error:         #C05050;   /* Softened error for dark               */
    --color-accent-ring:   rgba(232, 201, 122, 0.35);
    --color-accent-subtle: rgba(232, 201, 122, 0.12); /* Honey wash to match the dark-theme accent */
    --glass-bg:            rgba(30, 24, 14, 0.88);

    /* Dark counterparts of the formerly-phantom tokens (see the light block). These are
       the values that actually FIX the defect: the selected fills mix honey against
       --color-surface-sunken, so a dark ground here is what restores contrast for the
       active tile / border-card label on the ink canvas. Warm-dark, NOT neutral grey —
       they sit under honey and a cool grey would grey the accent out. */
    --color-surface-sunken: #241D14;  /* recessed wells, selected-fill mix base       */
    --color-surface-alt:    #35291B;  /* alternate surface — base sheet only          */
    --color-text-muted:     #A4977F;  /* de-emphasised readouts, lifted for dark      */

    /* ── Workspace Rulers — silver scale lifted for dark surfaces ────────────── */
    --color-ruler-track:   #34343A;   /* ruler gutter background (dark)          */
    --color-ruler-tick:    #5C5C66;   /* minor subdivision ticks                 */
    --color-ruler-major:   #82828E;   /* whole-unit major ticks                  */
    --color-ruler-label:   #A0A0AC;   /* unit numerals                           */
    --color-ruler-zero:    #C4C4D0;   /* origin (0) line — brightest             */
}

/* ── Global Reset & Base Typography ────────────────────────────────────────── */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Art Mode Thematic Tokens ───────────────────────────────────────────────
   Swapping these three variables at :root level is the ONLY mechanism for
   switching between the three art modes. No class changes. No JS style writes.
   ─────────────────────────────────────────────────────────────────────────── */

:root[data-mode="painting"] {
    --mode-accent:           #B07D2A;   /* Amber — warm watercolour gold          */
    --mode-accent-secondary: #E8C97A;   /* Honey — light ochre highlight          */
    --mode-surface-tint:     rgba(176, 125, 42, 0.06); /* Amber wash over surface */
}

:root[data-mode="comic"] {
    --mode-accent:           #D94040;   /* Bold red — high-contrast ink pop       */
    --mode-accent-secondary: #F5C842;   /* Action yellow — highlight, halftone    */
    --mode-surface-tint:     rgba(217, 64, 64, 0.06);  /* Red ink wash            */
}

:root[data-mode="anime"] {
    --mode-accent:           #5C5CF4;   /* Indigo-violet — neon cel-shade         */
    --mode-accent-secondary: #A78BFA;   /* Soft lavender — ambient glow           */
    --mode-surface-tint:     rgba(92, 92, 244, 0.06);  /* Violet atmosphere wash  */
}