/* Brand primitives — the ONE source shared by the player app and the marketing
 * site (public/wordsearch-landing/).
 *
 * Before this file, the site carried a hand-transcribed copy of these values,
 * taken from a DESIGN-STYLE-GUIDE.md that no longer exists in the repo. The
 * copy drifted: by the time it was noticed the two text ramps disagreed.
 * Anything both properties must agree on belongs here and nowhere else.
 *
 * NOT here, on purpose:
 *   - surfaces and grounds. The app layers translucent white over a gradient;
 *     the site paints solid section bands. Same brand, different problems.
 *   - the text ramp. The app's --text-primary is a teal while its softer steps
 *     are still tints of the old purple-navy, and the site is consistently
 *     teal. Unifying them changes what somebody sees, so it is a decision to
 *     be taken rather than a refactor to be slipped in.
 *   - components. A podium block has no business on a marketing page.
 *
 * Loaded BEFORE the theme, so [data-theme="..."] can still override any of it —
 * equal specificity, later wins. Theming is not lost by moving values here. */
:root {
    /* Accent — the one action colour. Every orange CTA on either property is
     * the --accent-light -> --accent-2 gradient at 135deg. */
    --accent: #E6772C;
    --accent-2: #E3650F;
    --accent-light: #ffa364;
    --accent-soft: rgb(251 230 213);
    /* Label colour for text ON --accent-soft. --accent-2 measures 2.74:1 there,
     * under the 4.5:1 that 15px/700 needs; this reads 4.55:1 on the same fill.
     * Deliberately NOT used as a fill — the accent itself is unchanged. */
    --accent-strong: #A94B0B;

    /* Button fills. These were app-theme tokens (--track-bg, --topbar-avatar-bg)
     * until buttons.css became shared — at which point .btn-dark-secondary
     * painted transparent on the marketing site, because the site never loads
     * the app's theme file. Anything the shared button system needs has to live
     * here by definition. */
    /* The page ground, shared. These are the two stops the app's --app-bg
     * linear gradient already ran between; the marketing site used to carry its
     * own #FFFAF3 / #F8E7D4 pair, so the two properties sat on different beiges
     * that nothing kept in step. One definition now drives both. */
    --ground-a: #FFF6EC;
    --ground-b: #FFEEDE;

    /* The brand teal. --fill-dark (#284A51) is the near-black end of this hue
     * and is nearly greyscale — at low opacity over a warm ground it collapses
     * to grey, which is what made the card waves read as dirt. This is the
     * chromatic teal: the same value the app already used for the XP bar. */
    --teal: #33707F;

    --fill-dark: #284A51;
    --fill-quiet: rgba(40, 74, 81, 0.12);

    /* Text. One ramp, one hue, both properties.
     *
     * The alphas are not a compromise between what each side used to carry —
     * they were measured. 0.78 clears WCAG AA (4.5:1) on all six grounds the
     * two properties paint, worst case 4.53; the site's old 0.72 failed on
     * three of them, worst case 3.93. The faint step takes the site's darker
     * 0.52 over the app's 0.45 for the same reason: neither is body copy, and
     * the darker of the two never costs contrast.
     *
     * --line is the hairline the two used to spell differently: it was
     * --grid-border in the app and --line on the site. One name now, since it
     * was never grid-specific — the app draws cards and rows with it too. */
    --text-primary: #284A51;
    --text-soft: rgba(40, 74, 81, 0.78);
    --text-muted: rgba(40, 74, 81, 0.70);
    --text-dim: rgba(40, 74, 81, 0.52);
    --text-on-accent: #FFFFFF;
    --line: rgba(40, 74, 81, 0.12);

    /* Radii. */
    --radius-card: 22px;
    --radius-btn: 16px;
    --radius-chip: 999px;

    /* Shadows. Warm brown, never neutral grey - a grey shadow on this cream
     * ground reads as dirt. */
    --shadow-card: 0 10px 30px rgba(120, 90, 60, 0.12);
    --shadow-frame: 0 30px 80px rgba(120, 90, 60, 0.18);

    /* Type. Nunito for language, JetBrains Mono for figures. */
    --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-grid: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    /* The highlight rotation, cycled per found word. The site currently uses
     * 1-8; 9 and 10 exist here so it can adopt the full set without a second
     * source of truth. */
    --hl-1: #FF9E7A;
    --hl-2: #7FC4F0;
    --hl-3: #C29BF0;
    --hl-4: #FBC46A;
    --hl-5: #6FD3C0;
    --hl-6: #FF8FB3;
    --hl-7: #9FD98C;
    --hl-8: #FFB37A;
    --hl-9: #A8C0F0;
    --hl-10: #F0E088;
}