/* Maison's identity, « Coupe »: the only place where colours, fonts and sizes
   are written. Everything else reads these tokens (docs/identite.md, and the
   board at /#/identite reads this very file). */

@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/instrument-serif-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/hanken-grotesk-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/hanken-grotesk-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/hanken-grotesk-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/dm-mono-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/dm-mono-500-normal.woff2") format("woff2"); }

:root {
  /* Light: the drawing on tracing paper. */
  --paper: #ebe7dd;
  --sheet: #f7f5ef;
  --sheet-2: #e2ddd0;
  --ink: #1a1e23;
  --ink-2: #464b52;
  --muted: #63666a;
  --line: #1a1e23;
  --line-2: #8f897b;
  --rule: #d2ccbe;
  --grid: #dfdace;
  --hatch: #a29b8a;
  --trace: #22568a;
  --on-trace: #f7f5ef;
  --axis: #63666a;
  --series: #22568a;
  --series-range: rgb(34 86 138 / 0.25);
  --ok: #2a7548;
  --warn: #95590a;
  --alarm: #c2301d;
  --alarm-bg: #c2301d;
  --on-alarm: #ffffff;
  --on-alarm-veil: rgb(255 255 255 / 0.18);
  --alarm-soft: #f3ddd6;
  --unknown: #63666a;
  --shadow: rgb(26 30 35 / 0.06);
  --shadow-lift: rgb(26 30 35 / 0.18);

  /* Fonts: the voice, the interface, the dimensions. */
  --font-voice: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* The type scale: eight steps, phone values here, desktop below. */
  --size-label: 11px;   --lead-label: 14px;
  --size-help: 13px;    --lead-help: 18px;
  --size-ui: 15px;      --lead-ui: 22px;
  --size-read: 17px;    --lead-read: 25px;
  --size-section: 20px; --lead-section: 26px;
  --size-key: 30px;     --lead-key: 34px;
  --size-phrase: 52px;  --lead-phrase: 52px;
  --size-big: 76px;     --lead-big: 72px;

  /* The rule: a grid of 8, one stroke, three angles (0, 45 and 90 degrees). */
  --unit: 8px;
  --gutter: 16px;
  --stroke: 1.5px;
  --radius: 3px;
  --touch: 44px;

  /* Motion tells once, in about a second, then settles. */
  --ease-draw: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-settle: cubic-bezier(0.3, 1.4, 0.5, 1);
  --tell: 1s;

  color-scheme: light dark;
}

@media (min-width: 1024px) {
  :root {
    --size-read: 18px;    --lead-read: 27px;
    --size-section: 22px; --lead-section: 28px;
    --size-key: 34px;     --lead-key: 38px;
    --size-phrase: 84px;  --lead-phrase: 82px;
    --size-big: 96px;     --lead-big: 90px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark: the blueprint, light lines on night blue. */
    --paper: #0c1a29;
    --sheet: #11233a;
    --sheet-2: #183050;
    --ink: #e9eff5;
    --ink-2: #b6c5d4;
    --muted: #8ea3b8;
    --line: #dce7f1;
    --line-2: #6f8aa6;
    --rule: #223c58;
    --grid: #142a43;
    --hatch: #3f5f80;
    --trace: #8dc2f2;
    --on-trace: #0c1a29;
    --axis: #8ea3b8;
    --series: #8dc2f2;
    --series-range: rgb(141 194 242 / 0.3);
    --ok: #5cc88f;
    --warn: #f1b94e;
    --alarm: #ff6a52;
    --alarm-bg: #c92e1b;
    --on-alarm: #ffffff;
    --on-alarm-veil: rgb(255 255 255 / 0.18);
    --alarm-soft: #3a1e22;
    --unknown: #8ea3b8;
    --shadow: rgb(0 0 0 / 0.25);
    --shadow-lift: rgb(0 0 0 / 0.5);
  }
}