/* css/tokens.css (P0a): the design tokens of the redesign (docs/design/redesign/DESIGN-SYSTEM.md, section 10). Source of truth: mockups/ds.css, the :root block.
   Loaded AFTER the legacy sheets (base ... shared), so these values win over the old :root in base.css. The old names (--bg, --panel, --panel2, --line, --text, --dim,
   --gold-deep, --ember, --moss, --arcane, --font-text) stay as ALIASES of the new steps, so every legacy rule still renders, only in the new colours.
   Owner: P0a (Foundation). Other packages do not edit this file; ask the lead. */
:root {
    /* surfaces: five steps of elevation, blue-black night ground (the "night survey map") */
    --surface-0: #0a0c11;   /* the void outside the app column, behind the map's edge */
    --surface-1: #0f1117;   /* app ground, strip, title */
    --surface-2: #151925;   /* sheets, tray, panels */
    --surface-3: #1c2232;   /* cards and rows on a panel */
    --surface-4: #262e43;   /* pressed, selected-quiet, segmented thumb */
    --scrim: rgba(5, 7, 11, .62);
    /* hairlines and control borders */
    --line-1: #262d42;      /* dividers */
    --line-2: #3a4463;      /* control borders */
    --line-gold: rgba(134, 196, 122, .48);
    /* ink: parchment on night */
    --ink: #efe6d0;         /* primary text */
    --ink-2: #c3b99f;       /* secondary text (8:1 on surface-2) */
    --ink-3: #a29b84;       /* tertiary, 12px labels only in caps (4.9:1 on surface-4, 5.7 on surface-3, 6.8 on the ground: DR-9) */
    --ink-on-gold: #0d1a0f;
    /* the one accent: a leaf green since Nolava (the names still say gold) */
    --gold: #86c47a;
    --gold-hi: #b5e39c;
    --gold-lo: #4f9559;
    --gold-wash: rgba(134, 196, 122, .10);
    --gold-wash-2: rgba(134, 196, 122, .18);
    --gold-grad: linear-gradient(180deg, #9bd28a 0%, #6db476 100%);
    --gold-grad-press: linear-gradient(180deg, #6db476 0%, #4f9559 100%);
    /* the three scores */
    --c-gold: #d9b45a;      /* Gold (coins) */
    --c-fame: #7fb0e8;      /* Fame (star) */
    --c-notor: #e58c52;     /* Notoriety (flame) */
    /* meaning colours */
    --danger: #e2685c;
    --danger-wash: rgba(226, 104, 92, .12);
    --success: #7fc79a;
    --success-wash: rgba(127, 199, 154, .12);
    --warn: #e0a85a;
    --info: #7fb0e8;
    /* state colours: one meaning each, on the map and in lists */
    --st-legal: var(--gold-hi);              /* lit: you may choose it */
    --st-maybe: rgba(181, 227, 156, .75);    /* dotted: maybe (a hidden path) */
    --st-illegal: rgba(143, 136, 114, .55);  /* dim, dashed: not now; always with a reason */
    --st-selected: var(--gold);              /* chosen */
    --st-locked: #8ea6d0;                    /* fixed by the rules: cannot be cleared */
    --st-danger: var(--danger);              /* ringed red: something here will hurt */
    /* magic colours (text dots and borders; the real colour chit art is used wherever a chit is shown) */
    --magic-white: #ece8da; --magic-grey: #9aa3b0; --magic-gold: #e6c250; --magic-purple: #a58be0; --magic-black: #5b5f73;
    /* chit kinds */
    --chit-fight: #cf6a5e; --chit-move: #6c9bd2; --chit-magic: #968de0;
    /* moods (natives) */
    --mood-ally: #7fd0a0; --mood-friendly: #a3d48c; --mood-neutral: #aaa38c; --mood-unfriendly: #e0a85a; --mood-enemy: #e57b70;
    /* the cream counter */
    --counter-face: #efe6d0; --counter-edge: #c9b98f; --counter-ink: #1d1a12;
    /* type */
    --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;    /* titles, day, labels in caps, big numerals */
    --font-voice: 'Alegreya', Georgia, 'Times New Roman', serif; /* the Story voice, prompts, descriptions */
    --font-ui: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* buttons, rows, numbers, controls */
    --fs-12: calc(12px * var(--ts, 1)); --fs-13: calc(13px * var(--ts, 1)); --fs-15: calc(15px * var(--ts, 1)); --fs-17: calc(17px * var(--ts, 1)); --fs-19: calc(19px * var(--ts, 1)); --fs-22: calc(22px * var(--ts, 1)); --fs-28: calc(28px * var(--ts, 1)); --fs-40: calc(40px * var(--ts, 1));
    --lh-tight: 1.15; --lh-base: 1.3; --lh-read: 1.42;
    --track-caps: .14em;
    /* spacing (4pt base) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
    --gutter: max(16px, var(--safe-l), var(--safe-r));
    /* radii */
    --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --r-counter: 10px;
    /* borders and elevation */
    --bw: 1px; --bw-sel: 2px;
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, .55);
    --shadow-sheet: 0 -10px 36px rgba(0, 0, 0, .5);
    /* motion */
    --d-fast: 120ms; --d-base: 200ms; --d-sheet: 280ms; --d-scene: 520ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    /* targets */
    --tap: 44px;            /* minimum for anything tappable */
    --tap-main: 52px;       /* primary and secondary action buttons */
    /* shell budget */
    --strip-h: 48px;
    --topgap: 36px;      /* extra room under the status bar (set from Settings > Top margin: iPhone Safari fades what sits right under it) */
    --safe-t: calc(env(safe-area-inset-top, 0px) + var(--topgap)); --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
    /* legacy aliases: the old styles.css keeps working while screens are migrated */
    --bg: var(--surface-1); --panel: var(--surface-2); --panel2: var(--surface-3); --line: var(--line-2);
    --text: var(--ink); --dim: var(--ink-2); --gold-deep: var(--gold-lo); --ember: var(--c-notor); --moss: var(--success); --arcane: var(--magic-purple);
}
/* legacy alias that ds.css does not carry: the old body-text face (Alegreya) is the new Story voice */
:root { --font-text: var(--font-voice); }

/* LEGACY SCOPE. Two tokens changed their VALUE between the old sheet and the design system: --tap (56 -> 44; 56 is now --tap-main's job) and --gutter (20 -> 16).
   A screen that is not rebuilt yet must keep its geometry, so every legacy `.screen` gets the old values back. A package that rebuilds a screen adds the class
   `ds-screen` to its root (BUILD-SPEC section 2: `.screen` -> `.screen.ds-screen`) and that screen, with everything inside it, switches to the new values. */
.screen:not(.ds-screen) { --tap: 56px; --gutter: max(20px, var(--safe-l), var(--safe-r)); }

@media (max-height: 700px) { :root { --tap-main: 48px; --strip-h: 44px; } }
@media (prefers-reduced-motion: reduce), (update: slow) { :root { --d-fast: 1ms; --d-base: 1ms; --d-sheet: 1ms; --d-scene: 1ms; } }
[data-calm="on"] { --d-fast: 1ms; --d-base: 1ms; --d-sheet: 1ms; --d-scene: 1ms; }
/* DR-2: Calm means nothing moves: the durations above only reach what is built from the tokens, so every animation (the screen entrance, the pulses, the shimmer, the rings) is switched off here, once.
   The camera of the map (mapview.js calmMotion) and the flip of the draw (shared.js) read the setting themselves. */
[data-calm="on"] *, [data-calm="on"] *::before, [data-calm="on"] *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }