/* WAVELENGTH kiosk - design tokens.
   Stage is authored at 1920x1080 and scaled to fit by js/stage.js.
   All sizes are absolute px against that stage, never viewport units. */

:root {
  /* Stage geometry. js/stage.js overwrites the two stage dimensions on #stage
     so the stage always fills the viewport exactly, never letterboxed, and
     never smaller than the authored 1920x1080. */
  --stage-w: 1920px;
  --stage-h: 1080px;
  --rail-w: 300px;
  --header-h: 104px;
  --gutter: 56px;

  /* Type stacks. Sarpanch is a squared industrial sans with flat sided bowls,
     the lettering of equipment rather than of books. It holds its weight when
     read from three metres. No romans anywhere in this system. */
  --sign: "Sarpanch", "Arial Black", sans-serif;
  --label: "Gantari", "Segoe UI", sans-serif;
  --data: "Azeret Mono", ui-monospace, monospace;

  /* Signage scale - read from 2 to 3 metres away on a 50in panel */
  --t-mega: 172px;
  --t-huge: 104px;
  --t-name: 66px;
  --t-chapter: 36px;
  --t-lead: 34px;
  --t-body: 25px;
  --t-caption: 19px;
  --t-data: 17px;
  --t-tick: 13px;

  /* Touch minimums - never go below these */
  --touch-min: 88px;
  --touch-primary: 120px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-mid: 480ms;
  --dur-slow: 900ms;

  /* Neutral letterbox behind the scaled stage */
  --letterbox: #07070a;

  /* ---- Exhibit 01: high key, cold, paper ---- */
  --t1-paper: #eceef1;
  --t1-paper-2: #e0e3e8;
  --t1-paper-3: #d3d8df;
  --t1-ink: #13161b;
  --t1-ink-soft: #3f464f;
  --t1-ink-faint: #8b939e;
  --t1-rule: #b9c0c9;
  --t1-accent: #2f6f9e;      /* tiger iris blue */
  --t1-accent-lift: #4e94c4;
  --t1-warm: #9c8348;        /* dry grass ochre */
  --t1-plate: #101318;       /* photo plate ground */

  /* ---- Exhibit 02: abyssal, low key ---- */
  --d2-abyss: #04070d;
  --d2-deep: #081425;
  --d2-deep-2: #0d2038;
  --d2-slate: #16304e;
  --d2-ink: #e8f1f8;
  --d2-ink-soft: #9fb6c9;
  --d2-ink-faint: #5d7488;
  --d2-rule: #1e3c5c;
  --d2-accent: #ea2f8b;      /* anthias magenta */
  --d2-accent-lift: #ff5da6;
  --d2-cyan: #35dcc8;        /* bioluminescent readout */

  /* Theme aliases - each page body sets these from the two sets above */
  --bg: var(--t1-paper);
  --bg-2: var(--t1-paper-2);
  --bg-3: var(--t1-paper-3);
  --fg: var(--t1-ink);
  --fg-soft: var(--t1-ink-soft);
  --fg-faint: var(--t1-ink-faint);
  --rule: var(--t1-rule);
  --accent: var(--t1-accent);
  --accent-lift: var(--t1-accent-lift);
  --accent-2: var(--t1-warm);
}

body.exhibit-tiger {
  --bg: var(--t1-paper);
  --bg-2: var(--t1-paper-2);
  --bg-3: var(--t1-paper-3);
  --fg: var(--t1-ink);
  --fg-soft: var(--t1-ink-soft);
  --fg-faint: var(--t1-ink-faint);
  --rule: var(--t1-rule);
  --accent: var(--t1-accent);
  --accent-lift: var(--t1-accent-lift);
  --accent-2: var(--t1-warm);
  --plate: var(--t1-plate);
}

body.exhibit-deep {
  --bg: var(--d2-abyss);
  --bg-2: var(--d2-deep);
  --bg-3: var(--d2-deep-2);
  --fg: var(--d2-ink);
  --fg-soft: var(--d2-ink-soft);
  --fg-faint: var(--d2-ink-faint);
  --rule: var(--d2-rule);
  --accent: var(--d2-accent);
  --accent-lift: var(--d2-accent-lift);
  --accent-2: var(--d2-cyan);
  --plate: #02040a;
}