/*
 * 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                       */

    /* ── Six more PHANTOM tokens — defined 2026-08-15 (owner ruling) ─────────────
       Read 41 times across 17 shipped stylesheets and declared NOWHERE, so every
       one of those rules has been rendering its inline fallback literal — which
       cannot flip with the theme. That is why the desktop sidebar paints white
       cards in dark mode. Measured, not estimated: `--color-surface` alone is read
       in 12 files with FOUR different fallbacks (#ffffff, #f5f5f5, a cool-dark
       color-mix in gallery-view, and NONE at all in marketplace/images.css, where
       the declaration is therefore invalid at computed-value time and drops).

       ⛔ THE "BYTE-IDENTICAL LIGHT" PRECEDENT ABOVE CANNOT APPLY HERE, and that is
       a finding rather than a shortcut. Those three tokens had ONE fallback each,
       so light could be pinned to it and left pixel-perfect. These six do not: no
       single value leaves all 41 sites unchanged, because the sites disagree with
       EACH OTHER. So they are defined from the declared warm palette instead —
       every value below is an existing brand colour, never a new one — and two
       light-theme changes follow by necessity, both flagged for the browser check:
         · gallery-view.css:77 — an import dropdown whose fallback chain is a COOL
           dark glass (#1b1b2b, --radius-md, --space-xxs: a foreign token set this
           app never adopted). It becomes warm-white, which is the correction.
         · marketplace/images.css:98,223 — currently transparent because the var
           has no fallback; the letterboxed photo face gains a real ground.

       ⛔ --color-warning IS DELIBERATELY NOT --color-accent. Amber #B07D2A is the
       CTA colour; a warning painted identically to every primary button stops
       reading as a warning. #B7791F is the darker amber that 10 of the 13 warning
       sites already fall back to, so the majority of them are pixel-unchanged. */
    --color-surface:        #FDFAF2;  /* card/panel ground — the app's warm white     */
    --color-surface-raised: #FFFFFF;  /* lifted off --color-surface (rows on a card)  */
    --color-badge-bg:       #F5EDD5;  /* parchment — quiet chip ground                */
    --color-warning:        #B7791F;  /* deep amber — distinct from the CTA accent    */
    --color-warning-bg:     #F5E6CE;  /* honey-light — warning ground                 */
    --color-warning-light:  #E8C97A;  /* honey — pulse mid-state, brighter than bg    */
    /* ⛔ DESTRUCTIVE, AND NOT THE SAME THING AS A WARNING. Removing a resource from a page
       is irreversible in the moment; amber says "careful", red says "this deletes". Declared
       here because it was being READ and never defined: `art-content-view.css .btn-delete-*`
       and now AutoBuild's `.aw-el-delete` both ask for it, surviving only on their inline
       fallback — the silent-token failure `css-tokens-fail-silently` is written about, and a
       token with no dark value would have inverted into an unreadable block. */
    --color-danger:         #E53E3E;  /* destructive action — delete, remove, discard      */
    --color-danger-dark:    #C53030;  /* its hover/pressed step                       */

    /* ── 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      */

    /* Dark counterparts of the six defined 2026-08-15. THIS half is the actual fix:
       until now every one of those 41 sites painted a light literal here, which is
       why cards stayed white on the ink canvas whatever the theme said.

       Warm-dark, never neutral grey — these sit against honey and amber, and a cool
       grey would grey the accent out (the same reasoning as the block above).
       `--color-surface-raised` stays LIGHTER than `--color-surface` so "raised"
       still reads as raised once the ground has inverted. */
    --color-surface:        #3D3020;  /* card/panel ground on the ink canvas          */
    --color-surface-raised: #4A3A28;  /* one step lifted, matching the dark border    */
    --color-badge-bg:       #4A3A28;  /* quiet chip ground on dark                    */
    --color-warning:        #E0A94E;  /* lifted amber — readable on warm dark         */
    --color-warning-bg:     #3A2E12;  /* deep amber ground                            */
    --color-warning-light:  #4A3A16;  /* pulse mid-state, lifted off the warning bg   */
    --color-danger:         #F06565;  /* lifted red — readable on the warm dark ground   */
    --color-danger-dark:    #D94A4A;  /* its hover/pressed step on 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  */
}