/* FrostPal theme: "a field instrument".
   Approved style tile, 2026-09-26 (Decision 31). Every token in the shared
   contract (docs/DESIGN.md) is defined here, light and dark.
   Carrier-neutral: no brown, purple, postal blue, or carrier red/yellow. */

@font-face {
  font-family: "Archivo";
  src: url("../edition/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../edition/fonts/ibm-plex-sans-variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../edition/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../edition/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../edition/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Type */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-stage-number: var(--font-mono);
  --display-stretch: 115%;
  --display-weight: 800;
  --heading-weight: 700;
  --display-tracking: -0.01em;
  --stage-tracking: 0.04em;
  --stage-number-weight: 500;
  --font-size-body: 1.125rem;
  --font-size-body-phone: 1.0625rem;
  --line-height-body: 1.65;

  /* Shape: crisp */
  --radius-card: 8px;
  --radius-panel: 6px;
  --radius-control: 6px;
  --radius-button: 6px;
  --radius-badge: 999px;
  --shadow-hover: 0 6px 18px rgb(13 31 38 / 0.10);

  /* Colour */
  --color-bg: #F4F7F8;             /* Ground */
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F4F7F8;
  --color-text: #0D1F26;           /* Ink */
  --color-text-muted: #4A5D66;     /* Slate */
  --color-primary: #0A6E82;        /* Glacier */
  --color-primary-strong: #075566; /* Deep glacier */
  --color-primary-contrast: #FFFFFF;
  --color-tint: #E3F1F4;           /* Frost */
  --color-highlight: #F5B83D;      /* Thaw: decoration only, never text */
  --color-blank: #FCE2A5;          /* filled prompt blanks */
  --color-border: #CFDCE1;
  --color-border-soft: #E3EBEE;
  --color-border-control: #6B7F88;
  --color-focus: #B4510A;
  --color-live-bg: #DDF3E7;
  --color-live-text: #11573A;
  --color-built-bg: #FDF0D2;
  --color-built-text: #6B4A00;
  --color-soon-bg: #ECEFF1;
  --color-soon-text: #46545B;
  --color-note-bg: #E3F1F4;
  --color-note-border: #CFDCE1;
  --color-warn-text: #5E4300;
  --color-warn-border: #8A6A1F;
  --color-range-track: #B7CDD4;
  --color-header-bg: #0D1F26;
  --color-header-text: #FFFFFF;
  --color-header-muted: #B9D3DA;
  --color-header-accent: #5CC8DC;
  --color-header-cta-bg: #5CC8DC;
  --color-header-cta-text: #04222A;
  --color-wordmark: #FFFFFF;
  --color-cardhead-bg: #0D1F26;
  --color-cardhead-text: #FFFFFF;
  --color-cardhead-accent: #5CC8DC;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-hover: 0 6px 18px rgb(0 0 0 / 0.35);
    --color-bg: #0B171C;
    --color-surface: #12232A;
    --color-surface-sunken: #0E1D23;
    --color-text: #E6F1F4;
    --color-text-muted: #9DB3BC;
    --color-primary: #5CC8DC;
    --color-primary-strong: #8ADAE9;
    --color-primary-contrast: #04222A;
    --color-tint: #163640;
    --color-highlight: #F5B83D;
    --color-blank: #5A4512;
    --color-border: #24404A;
    --color-border-soft: #1B323B;
    --color-border-control: #7E9AA5;
    --color-focus: #FFB366;
    --color-live-bg: #173D2C;
    --color-live-text: #BDEBD1;
    --color-built-bg: #3D300F;
    --color-built-text: #FBE3A6;
    --color-soon-bg: #22323A;
    --color-soon-text: #C4D2D8;
    --color-note-bg: #163640;
    --color-note-border: #24404A;
    --color-warn-text: #FBE3A6;
    --color-warn-border: #B99440;
    --color-range-track: #2E4C57;
    --color-header-bg: #081116;
    --color-header-text: #E6F1F4;
    --color-header-muted: #9DB3BC;
    --color-header-accent: #5CC8DC;
    --color-header-cta-bg: #5CC8DC;
    --color-header-cta-text: #04222A;
    --color-wordmark: #E6F1F4;
    --color-cardhead-bg: #081116;
    --color-cardhead-text: #E6F1F4;
    --color-cardhead-accent: #5CC8DC;
  }
}