/* Pre-Genesis design tokens: a lapis-and-gold-leaf manuscript.
   Load before hud.css. Component rules live in hud.css; docs/rework/DESIGN.md
   lists every token with its intended use. */
@import url("assets/fonts/fonts.css");

:root {
  color-scheme: dark;

  /* Colour: the seven contract hues and the reading surface. */
  --lapis-night: #0F1A30;
  --lapis: #172A4C;
  --lapis-raised: #1E365F;
  --limewash: #EFE7D6;
  --ink: #14110D;
  --mist: #A9B4C8;
  --gold-leaf: #C9A227;
  --verdigris: #3E8E7E;
  --ochre: #D59A3A;
  --cinnabar: #C0462E;
  --papyrus: #EDE3CC;
  --papyrus-ink: #2A2519;

  /* Status hues lightened for small text and icons on lapis (4.5:1 or better).
     The contract hues above stay in use for fills, meters and hairlines. */
  --verdigris-text: #6FBFAE;
  --cinnabar-text: #EC8A74;

  /* Hairlines and washes (the same hues at reduced strength; never gradients). */
  --rule: rgb(239 231 214 / .14);
  --rule-strong: rgb(239 231 214 / .45);
  --wash: rgb(239 231 214 / .06);
  --wash-strong: rgb(239 231 214 / .12);
  --cinnabar-wash: rgb(192 70 46 / .16);
  --cinnabar-rule: rgb(192 70 46 / .55);
  --gold-wash: rgb(201 162 39 / .35);
  --verdigris-wash: rgb(62 142 126 / .18);
  --ochre-wash: rgb(213 154 58 / .16);
  --scrim: rgb(15 26 48 / .64);
  --papyrus-rule: rgb(42 37 25 / .2);
  --papyrus-wash: rgb(42 37 25 / .06);
  --papyrus-muted: #5C5340;

  /* Type: the game's own PreGenesis families (assets/fonts/fonts.css). */
  --font-display: "PreGenesis Display", "PreGenesis Text", serif;
  --font-text: "PreGenesis Text", system-ui, sans-serif;
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-display: 600;
  --weight-display-strong: 800;
  --text-12: .75rem;
  --text-14: .875rem;
  --text-16: 1rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-32: 2rem;
  --text-48: 3rem;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.5;
  --tracking-display: .01em;
  --tracking-eyebrow: .16em;
  --tracking-code: .12em;

  /* Space: a 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape. */
  --radius-control: 6px;
  --radius-panel: 4px;
  --hairline: 1px;
  --shadow-float: 0 12px 32px rgb(5 10 22 / .5);

  /* Focus: a 2px gold-leaf ring outside the control (lapis on papyrus). */
  --focus-color: var(--gold-leaf);
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Elevation: three surfaces and nothing else. Panels that sit on the map use
     --surface-sunk, sheets and cards on them step up one level at a time. */
  --surface-sunk: var(--lapis-night);
  --surface: var(--lapis);
  --surface-raised: var(--lapis-raised);

  /* Sizes. */
  --icon-size: 1.25em;
  --target: 44px;
  --target-compact: 36px;
  --topbar-height: 48px;
  --pin-size: 28px;
  --portrait-sm: 40px;
  --portrait-md: 56px;
  --portrait-lg: 104px;
  --portrait-xl: 152px;
  --plate-width: 232px;
  --lozenge: 7px;
  --panel-width: 320px;
  --sheet-width: 400px;
  --dialog-width: 560px;
  --dialog-width-wide: 760px;
  --dialog-width-small: 420px;

  /* Safe areas (notches and home indicators). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Motion. Interface transitions run 160-220ms; only the two orchestrated
     moments (the campaign reveal and the victory screen) use the slow step.
     Durations drop to zero for reduced motion. */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 160ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Stacking. */
  --layer-map: 0;
  --layer-hud: 10;
  --layer-drawer: 20;
  --layer-bar: 30;
  --layer-toast: 40;
  --layer-update: 50;
  --layer-reveal: 60;
}

/* Phones get a larger map pin: a 36px disc inside the same 44px touch area. */
@media (pointer: coarse) {
  :root {
    --pin-size: 36px;
  }
}

/* Fine pointers can use denser controls; touch keeps 44px targets. */
@media (pointer: fine) {
  :root {
    --target: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduced-motion="false"]) {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* The in-game Motion setting (settings.js) wins over the device setting. */
:root[data-reduced-motion="true"] {
  --duration-fast: 0ms;
  --duration-base: 0ms;
  --duration-slow: 0ms;
}

/* Text size setting: every rem-based size scales together. */
:root[data-text-size="large"] {
  font-size: 112.5%;
}

/* Contrast setting: brighter secondary text and firmer hairlines. */
:root[data-contrast="high"] {
  --mist: #D3DAE6;
  --rule: rgb(239 231 214 / .32);
  --rule-strong: rgb(239 231 214 / .8);
  --wash: rgb(239 231 214 / .1);
  --scrim: rgb(15 26 48 / .82);
  --papyrus-rule: rgb(42 37 25 / .45);
}

/* BEM Studios ident. The developer's own brand palette, used by the splash
   before the title and nowhere else in the game. The ink, band and lamp are
   drawn on a canvas in ui/ident.js; these are the page colours around it. */
:root {
  --bem-silver: #e9edf2;
  --bem-word: #14171b;
  --bem-quiet: #5b6470;
}