/* Design tokens shared by the game (index.html) and the trail editor
   (editor.html). Change a colour or font here and both pages follow; keep
   page stylesheets to var() references rather than new literals.

   Colours given as light-dark() follow the theme (see js/theme.js): the
   device's own, unless one is picked in the settings. The game keeps its
   dark look in both, so only the page around it and the editor use them. */

/* Jersey 10 by Sarah Cadigan-Fried, SIL Open Font License (fonts/OFL.txt). */
@font-face {
    font-family: "Jersey 10";
    src: url("../fonts/Jersey10-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;

    /* Base palette */
    --color-page: light-dark(#eae9d9, #111c20);
    --color-shell: light-dark(#f4f2e6, #17262b);
    --color-surface: light-dark(#e3e1d0, #23353b);
    --color-surface-raised: #2b3e45;
    --color-surface-hover: light-dark(#d5d3c0, #405962);
    --color-border: light-dark(#c3c1ad, #425257);
    --color-shadow: light-dark(#d2d0bc, #0d1b20);
    --color-modal: #17262b;
    /* The light paper behind trail previews and rider art. */
    --color-paper: #eae9d9;

    /* Text */
    --color-text: light-dark(#1f2b2e, #f6f3e8);
    --color-text-soft: light-dark(#43504d, #aeb7b3);
    --color-text-muted: light-dark(#5b6966, #91a7a8);
    --color-text-faint: light-dark(#66736f, #93a8a8);

    /* Accent: the orange call to action, and the ink that sits on it */
    --color-accent: #ff8952;
    --color-accent-hover: #ff9a68;
    --color-accent-ink: #241710;
    --color-accent-ink-muted: #563021;
    --color-focus: light-dark(#c4531f, #ffad76);
    /* The accent as text, deeper on a light page to stay readable */
    --color-accent-text: light-dark(#b24a17, #ff8952);

    /* Green: secondary highlight, custom trails, the continue card */
    --color-green: light-dark(#4c7a5e, #c6dfa9);
    --color-green-hover: light-dark(#5a8b6c, #e1f3ca);
    --color-green-ink: light-dark(#f3f8ee, #243c31);
    --color-green-surface: #29433c;
    --color-green-surface-hover: #34564c;
    --color-green-border: #718f7f;
    --color-green-text-muted: #a9bbb4;
    /* The trail editor row and the continue card's quieter edge */
    --color-green-row: #1f3a33;
    --color-green-row-hover: #29493f;
    --color-green-row-border: #4f7a63;
    --color-green-border-dim: #587268;

    /* Gold: bonus trails and achievements */
    --color-gold: #f0c45a;
    --color-gold-surface: #3d3324;
    --color-gold-border: #8f7a52;

    /* Medals */
    --color-medal-gold: #f1c75b;
    --color-medal-silver: #c9d2d0;
    --color-medal-bronze: #d9955f;
    /* The ink on a filled medal badge */
    --color-medal-gold-ink: #3d2c07;
    --color-medal-silver-ink: #27322f;
    --color-medal-bronze-ink: #2f1a0c;
    /* Gamepad face buttons; A and Y use green and gold. */
    --color-pad-b: #e6866f;
    --color-pad-x: #7fb2d9;

    /* Status */
    --color-ahead: #9fd88a;
    --color-behind: #ff9f87;
    --color-danger: #e5484d;
    --color-danger-text: light-dark(#a83c25, #f0a08c);
    --color-danger-border: light-dark(#d9a596, #75463f);
    --color-danger-surface: #342a2a;
    --color-danger-surface-hover: #60362f;
    /* Editor validation and toasts: error, warning, info */
    --color-error: light-dark(#c64a22, #ec7044);
    --color-error-surface: light-dark(#f6ddd2, #3a2320);
    --color-error-text: light-dark(#7e2a12, #f5c4b4);
    --color-error-hover: light-dark(#d95a30, #f58b64);
    --color-error-ink: light-dark(#fff8f0, #241710);
    --color-warning: light-dark(#a87612, #e8bb66);
    --color-warning-ink: light-dark(#fff8e6, #2d2410);
    --color-warning-surface: light-dark(#f3e8cc, #2f2a1c);
    --color-warning-text: light-dark(#5e4510, #f1dca8);
    --color-info: light-dark(#2a7f7a, #83d1ce);

    /* Lists, inputs, option buttons, and other controls */
    --color-row: light-dark(#ebe9da, #213338);
    --color-row-open: #1c2c30;
    --color-row-hover: light-dark(#e0decb, #2a4047);
    --color-input: light-dark(#fbfaf3, #142126);
    --color-input-hover: light-dark(#f0eee2, #1c2e34);
    --color-option: #252d2e;
    --color-option-checked: #3a3b36;
    --color-option-track: #101516;
    /* The editor's panels laid over the trail: its toasts, and the softer help line and map */
    --color-overlay: light-dark(#f4f2e6f2, #142126f2);
    --color-overlay-soft: light-dark(#f4f2e6d9, #142126d9);
    /* Translucent panels on the menu scenery, and the note by a form */
    --color-panel: #15232899;
    --color-note: #1f2d30;
    --color-modal-border: #4b5553;
    --color-kbd-border: #607074;
    --color-preview-border: #52645e;
    --color-avatar-border: #ffffff4a;
    --color-icon-button-hover: #293132;
    --color-icon-button-hover-border: #465152;
    /* Dark veils under the results, the pause screen and the menu's confirm */
    --color-dim: #09100d66;
    --color-dim-soft: #09100d99;
    --color-dim-menu: #0d1b20b3;
    /* The wash over the menu's scenery, deepest behind the menu on the left */
    --color-scenery-veil: #102226b8;
    --color-scenery-veil-mid: #1022269e;
    --color-scenery-veil-edge: #10222678;
    /* The badge that marks the dev sandbox */
    --color-sandbox: #c2410c;
    --color-sandbox-ink: #fff;
    /* A shade pressed into a pad button's face or a colour chip */
    --color-shade: #0000002e;

    /* Laid over the trail: the HUD pills, the game's buttons and the toasts */
    --color-hud: #17201edb;
    --color-hud-border: #ffffff24;
    --color-hud-divider: light-dark(#0000001a, #ffffff1a);
    --color-hud-icon: #d8ebcb;
    --color-hud-text-soft: #f4f2e9a6;
    --color-hud-button: #182321d9;
    --color-hud-button-phone: #101b1aee;
    --color-hud-button-border-phone: #ffffff52;
    --color-scene-text: #f7f0dc;
    --color-toast: #17201eee;
    --color-toast-border: #fff4;
    --color-debug: #101b1acc;
    --color-debug-text: #b8f5c8;
    /* The guide arc drawn on the How to play art, read from script */
    --color-guide: #d96842;
    /* What's new labels */
    --color-heads-up: #ffd166;
    --color-improved: #9cc7e0;

    /* Rider avatars */
    --color-male-bg: #dce4d8;
    --color-male: #4f695d;
    /* The gender symbols on a rider's avatar. */
    --color-gender-male: #6fa3e6;
    --color-gender-female: #ee8db0;

    /* The editor's mini map, read from script */
    --color-map-ground: #8a9d8f;
    --color-map-back-wall: light-dark(#c9cfc0, #4d5f59);
    --color-map-edge: light-dark(#3f5048, #eef3e6);
    --color-map-water: #5fa8d3;
    --color-map-apple: #e0523a;
    --color-map-spike: light-dark(#33403c, #e7ecea);
    --color-map-start: #8fd18b;
    --color-map-finish: #f0a3c8;
    /* Flag poles and the rings round problem dots */
    --color-map-outline: #142126;
    /* Everything off screen, and the frame round what is on it */
    --color-map-dim: light-dark(#eae9d98c, #0e1a1e8c);
    --color-map-frame: light-dark(#c4531f, #fff3be);

    /* Shape and elevation */
    --radius-pixel: 2px;
    --radius-round: 50%;
    --shadow-pixel: 3px 3px 0 var(--color-shadow);
    --shadow-pixel-small: 2px 2px 0 var(--color-shadow);
    --shadow-modal: 8px 8px 0 #0d1b2070;
    --shadow-hud: 0 4px 16px #16221c30;
    /* Under the game's frame on a dark page; see the light theme's below. */
    --shadow-shell: 0 18px 55px #0006;
    /* Text laid over the trail, so it stays readable on a bright sky. */
    --shadow-text-scene: 2px 2px 0 #172820aa;

    /* Type */
    --font-ui: ui-monospace, "SFMono-Regular", Consolas, monospace;
    /* Headings only; small text stays in --font-ui. Jersey 10 draws on a
       grid of 1400 / 75 units, so multiples of this size land every block on
       whole pixels (one step: 1px blocks, 10px capitals). */
    --font-display: "Jersey 10", var(--font-ui);
    --font-display-step: 18.6667px;

    /* Text sizes for --font-ui. The small steps are deliberately 1px apart:
       the monospace UI text is tiny and each pixel reads as a level. */
    --text-2xs: 7px;
    --text-xs: 8px;
    --text-sm: 9px;
    --text-md: 10px;
    --text-lg: 11px;
    --text-xl: 12px;
    --text-2xl: 13px;
    --text-3xl: 14px;
    /* Anything smaller and iOS zooms the page when the field is focused. */
    --text-input: 16px;

    /* Weights. The UI monospace's heaviest cut is 800, so anything above
       that renders the same; heavy names the intent. */
    --weight-regular: 400;
    --weight-bold: 700;
    --weight-heavy: 900;
}

:root[data-theme="light"] {
    color-scheme: light;
}
:root[data-theme="dark"] {
    color-scheme: dark;
}

/* The game's frame keeps its dark look in either theme, so its shadow can't
   follow the theme by light-dark(), which would read the frame's own dark:
   the page's theme picks it here instead. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --shadow-shell: 0 18px 50px #2a2a1a33;
    }
}
:root[data-theme="light"] {
    --shadow-shell: 0 18px 50px #2a2a1a33;
}