/*
 * Relay design tokens — the single source of colour, type, space and form.
 *
 * Ported from the Relay design system (Claude Design project
 * relay-aa1050ca-0a8e-48dd-abec-10a7b4d266ad). Every value below is the
 * system's; the only additions are marked "Relay addition".
 *
 * NEVER hard-code a colour anywhere else in the app. Light and dark both come
 * from this file, so a literal hex in a component breaks one of the two themes.
 *
 * Theming works in two layers:
 *   1. `@media (prefers-color-scheme: dark)` follows the OS.
 *   2. `:root[data-theme="dark"]` is the explicit opt-in.
 * The media query is scoped `:root:not([data-theme="light"])` so an explicit
 * "light" choice still wins on a dark-mode OS. That keeps the dark values to
 * two copies instead of the three the source spec needed.
 */

:root {
    /* --- Brand + semantic hues ---------------------------------
       `--signal` is ACTION ONLY: links, primary buttons, focus rings, "today".
       Never use it for a status — lifecycle is marigold/posted/ink-3. */
    --signal: #2A44D4;         /* press-cobalt */
    --signal-strong: #1E33A8;
    --signal-tint: #ECEFFE;
    --marigold: #C77E17;       /* editor's highlighter — scheduled / on-deck */
    --marigold-tint: #FBEFD3;
    --posted: #12704A;
    --posted-tint: #E0F3EA;
    --critical: #B32B3D;
    --critical-tint: #FBE9EC;

    /* Relay addition: the foreground that sits on top of --signal. Having it as
       a token means .btn--primary and .cal__today need one rule, not one per
       theme (the source spec repeated six override rules to do this). */
    --pri-on: #ffffff;

    /* --- Neutrals (cool slate-indigo bias) --------------------- */
    --ink: #16182B;            /* primary text */
    --ink-2: #43485E;          /* secondary text */
    --ink-3: #71768B;          /* meta text — also the "draft" status colour */
    --paper: #F4F5F7;          /* page ground */
    --surface: #FFFFFF;        /* card ground */
    --surface-2: #FAFAFC;      /* inset ground */
    --line: #E4E6EC;           /* hairline */
    --line-strong: #CBD0DC;    /* input borders, stronger dividers */

    /* --- Type ---------------------------------------------------
       Native stacks by design: nothing to download, so the UI can never fall
       back to a webfont that failed to load. Three roles — an editorial serif
       for display, a humanist grotesque for UI, a monospace for anything that
       must line up or be read exactly (counts, times, slugs, model names).

       The named faces come BEFORE the `ui-*` generics, which is the one change
       from the source spec. `ui-sans-serif` resolves on Linux — to DejaVu Sans,
       a much wider face than SF Pro or Segoe UI — so with it leading, every
       later entry was unreachable and the UI rendered in the wrong grotesque
       anywhere but macOS. Ordering the real faces first keeps SF Pro on macOS
       and Segoe UI on Windows exactly as designed, and picks up Arial /
       Liberation Sans on Linux instead of DejaVu. Same reasoning for mono. */
    --font-display: "New York", Georgia, "Iowan Old Style", "Times New Roman", ui-serif, serif;
    --font-ui: -apple-system, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
    --font-data: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", ui-monospace, monospace;

    /* The type scale, and the only place a text size is decided.

       Nine steps, in three bands. The bottom two (`eyebrow`, `meta`) are chrome:
       uppercase micro-labels and mono metadata, sized to be skimmed rather than
       read. `help` upward is prose — anything made of sentences takes one of
       these, and 13px is the floor, because a paragraph set smaller than that
       reads as small print however carefully it was written.

       The top of the scale is deliberately shallow. `--t-h1` was a
       `clamp(2.1rem, 5vw, 3.1rem)` that reached 49.6px and `--t-display` one that
       reached 73.6px, but nothing ever used either — every heading in the app
       hard-coded its own px value instead, which is how nineteen `<h1>`s ended up
       at ten different sizes. A heading only has to be bigger than the paragraph
       under it; the distance from 16 to 30 is enough, and it leaves the page
       looking composed rather than shouted. */
    --t-eyebrow: 0.6875rem;  /* 11px */
    --t-meta: 0.75rem;       /* 12px */
    --t-help: 0.8125rem;     /* 13px */
    --t-body: 1rem;          /* 16px */
    --t-lead: 1.125rem;      /* 18px */
    --t-h3: 1.25rem;         /* 20px */
    --t-h2: 1.5rem;          /* 24px */
    --t-h1: 1.625rem;        /* 26px */
    --t-display: 1.875rem;   /* 30px */

    /* --- Space + form ------------------------------------------
       One 4px-based scale drives every gap. Layout groups use `gap`, not
       per-element margins, so spacing never doubles or collapses. */
    --s1: 0.25rem;   /* 4px  */
    --s2: 0.5rem;    /* 8px  */
    --s3: 0.75rem;   /* 12px */
    --s4: 1rem;      /* 16px */
    --s5: 1.5rem;    /* 24px */
    --s6: 2rem;      /* 32px */
    --s7: 3rem;      /* 48px */
    --s8: 4.5rem;    /* 72px */

    /* The sign-in panel — `6a`'s left half.

       Pinned rather than themed. The panel is dark in both themes by design: it is
       a brand surface, the way the platform previews are platform surfaces, and a
       light version of it would be a different screen. So the values are the dark
       theme's, written once here, where hex belongs, instead of as literals in the
       stylesheet. Referenced only by the `.signin__*` rules. */
    --signin-panel: #16182B;
    --signin-panel-ink: #ECEDF4;
    --signin-panel-title: #FFFFFF;
    --signin-panel-quiet: #B4B8CC;
    --signin-panel-meta: #82869C;
    --signin-panel-line: #2A2E48;
    --signin-panel-rule: #3A3F5E;
    --signin-dot-a: #8FA0FF;
    --signin-dot-b: #E9B45C;
    --signin-dot-c: #63CE9A;

    /* Reading measures for the Core Article.

       Each is used twice — once by the element that displays the text and once by
       the field that replaces it — because the article has no separate edit page:
       a title that wraps differently while you are typing it than when an approver
       reads it is a different title. Naming each measure once is what stops the
       pair drifting.

       Wider than the mockup's 26/64/66ch, deliberately. `1g` is drawn as a reading
       view, where a narrow measure is right; the same numbers in the editor left a
       third of the column empty beside the rail. These sit at the top of the
       comfortable range (roughly 45–90 characters a line) rather than past it. */
    --measure-title: 32ch;
    --measure-lede: 76ch;
    --measure-body: 86ch;

    --r-sm: 5px;
    --r-md: 8px;
    /* Relay addition: the output editor's boxes — the caption surface, the
       media slots and the rail cards — all sit at 10px, between a control and
       a panel. Without the step they would have to hard-code a radius. */
    --r-ml: 10px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* The stage the standalone preview stands on — `10n`.

       Pinned rather than themed, for the same reason the sign-in panel is: it
       is a viewing surface, not one of Relay's. The point of that page is to
       judge a post against the platform it is going for, and a preview whose
       surround flips with the reader's chrome is a different judgement each
       time. Everything translucent on it is derived with color-mix from these
       two, so there is one dark and one light and nothing else to keep in sync.
       Referenced only by the `.stage*` rules. */
    --stage: #101223;
    --stage-ink: #FFFFFF;

    /* Relay addition: the code surface. A prompt template is code, and a code
       surface is deliberately theme-invariant — an editor's syntax theme does not
       flip with the chrome around it, and the mockups draw this box dark inside a
       light screen. Declared as tokens rather than literals so the one place that
       decides "code looks like this" stays one place. */
    --code-surface: #16182B;
    --code-ink: #C9CCDA;
    --code-token: #8FA0FF;

    --shadow-1: 0 1px 2px rgba(22, 24, 43, .06), 0 1px 3px rgba(22, 24, 43, .05);
    --shadow-2: 0 6px 16px rgba(22, 24, 43, .10), 0 2px 5px rgba(22, 24, 43, .06);
    /* Relay addition: lifted surfaces (modals, the drag ghost). */
    --shadow-3: 0 24px 60px rgba(22, 24, 43, .22), 0 4px 12px rgba(22, 24, 43, .10);

    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Relay addition: a stacking order. The source spec had exactly one
       z-index, which isn't enough once popovers, drawers and modals coexist. */
    --z-sticky: 30;
    --z-popover: 40;
    --z-scrim: 50;
    --z-drawer: 60;
    --z-modal: 70;
    --z-toast: 80;
}

/* Dark values, shared by the OS preference and the explicit toggle.
   Keep these two selector lists in sync — they must hold identical values. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --signal: #8FA0FF;
        --signal-strong: #AFBAFF;
        --signal-tint: #1D2350;
        --marigold: #E9B45C;
        --marigold-tint: #392C12;
        --posted: #63CE9A;
        --posted-tint: #123329;
        --critical: #F0788A;
        --critical-tint: #391C23;

        --pri-on: #10121F;

        --ink: #ECEDF4;
        --ink-2: #B4B8CC;
        --ink-3: #82869C;
        --paper: #0E1020;
        --surface: #181B2E;
        --surface-2: #12142440;   /* 8-digit: ~25% alpha over --surface */
        --line: #2A2E48;
        --line-strong: #3A3F5E;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-2: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
        --shadow-3: 0 24px 60px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
    }
}

:root[data-theme="dark"] {
    --signal: #8FA0FF;
    --signal-strong: #AFBAFF;
    --signal-tint: #1D2350;
    --marigold: #E9B45C;
    --marigold-tint: #392C12;
    --posted: #63CE9A;
    --posted-tint: #123329;
    --critical: #F0788A;
    --critical-tint: #391C23;

    --pri-on: #10121F;

    --ink: #ECEDF4;
    --ink-2: #B4B8CC;
    --ink-3: #82869C;
    --paper: #0E1020;
    --surface: #181B2E;
    --surface-2: #12142440;
    --line: #2A2E48;
    --line-strong: #3A3F5E;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
    --shadow-3: 0 24px 60px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
}