/* ============================================================================
 * THE ROOM — the host console's token layer (2026-09-07).
 *
 * The console wears the native app's language: the PRINTED ROOM. Flat inks, a
 * halftone screen on ink that reads distance to the content, a colourway that
 * follows the chosen app icon, and misregistration as the motion grammar. Names
 * here mirror App/Host/Brand.swift and App/Host/DesignSystem/Colourway.swift so
 * the two systems read as one; every value was sampled from the icon sheet or
 * read out of the Swift, never invented here.
 *
 * WHAT THIS FILE IS NOT. It is not tokens.css. That file's :root is the legacy
 * guest PWA's room and its [data-theme="host"] block is the OLD console, still
 * worn by layout-auth (login/signup/reset/checkout) and by staff-web. The two
 * files are never loaded together, which is why the names below are unprefixed.
 *
 * Load order: room.css → console.css → (page sheets). Nothing else.
 * ========================================================================== */

/* ---- fonts. Self-hosted, variable, latin. Moved here from brand.css verbatim
 * so the console stops paying for a render-blocking Google Fonts request on
 * every page for three faces it no longer uses. The marquee is Oswald, the
 * program is Source Sans 3; there is no monospace face anywhere in the app. ---- */
@font-face {
  font-family: "Oswald";
  src: url("/design/fonts/oswald.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/design/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---- the neutral ramp. Cinema black, deliberately NEUTRAL: every one of
   * these was navy once and the cast was removed. No pure black, no pure white. */
  --void:    #0C0C0E;   /* the room */
  --panel:   #1A1A1E;
  --raised:  #26262B;
  --edge:    #36363D;   /* the line */
  --line2:   #2E2E35;
  --text:    #F4F4F5;
  --glass:        rgba(23, 23, 27, .55);
  --glass-raised: rgba(39, 39, 45, .60);
  --well:    #060607;   /* a well below the void: switch tracks, meters */

  /* ---- constant across every colourway. The way has exactly two jobs, the
   * KEY (the one filled, pressable face on a screen) and the CATCH ("this is
   * the chosen one"), and both are paper: a pink key on a pink field vanished.
   * Dark type on the key, on every way. */
  --key:        #F0F0F2;
  --key-hi:     #FFFFFF;
  --key-lo:     #C6C6CC;
  --on-key:     #131316;
  --catch:      #F4F4F5;
  --catch-line: rgba(244, 244, 245, .42);   /* the active hairline */
  --catch-wash: rgba(244, 244, 245, .12);   /* a quiet wash behind a chosen thing */
  --error:      #FF4D4D;                     /* the ONLY red; red means error/destructive */
  --error-quiet: rgba(255, 77, 77, .14);

  /* ---- the colourway. :root is INK, the icon the app ships with. pink and
   * blue below override exactly these eight. Only room.js, the misregister
   * passes and the empty-pool cover may reference --pass-* / --face; nothing
   * else in the console is ever tinted by the way. */
  --pass-a:       #FF3D9A;   /* first pass, printed up and left */
  --pass-b:       #2965E2;   /* second pass, down and right */
  --face:         #FF82F3;   /* printed last, on top */
  --ground:       #0C0C0E;   /* the icon's field = the room's ground */
  --screen-dot:   #31313D;   /* the halftone's dot */
  --screen-dot-2: none;      /* ink prints ONE screen; pink/blue print two */
  --text-dim:     #9E9EA6;
  --text-faint:   #62626B;

  /* ---- hues. One per READOUT, so no single colour speaks for the whole app;
   * never a surface, never a control. Gauges escalate green → yellow ≥.80 →
   * red ≥.95. There is no amber in this system. */
  --hue-red:    #FF5F6B;   /* hearts */
  --hue-orange: #FF9F45;   /* photos */
  --hue-yellow: #F2CE55;   /* capacity */
  --hue-green:  #4FD290;   /* guests, time remaining */
  --hue-blue:   #6FA0FF;   /* the old default, now one of six */
  --hue-purple: #A98BFF;   /* dates */

  /* ---- type. Two voices: the marquee (Oswald 500) for titles, figures,
   * kickers and buttons; the program (Source Sans 3) for body and labels.
   * Never mixed within a line. Tracking is proportional to size. */
  --marquee: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --program: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --t-name: 34px;  --t-room: 28px;  --t-section: 24px;  --t-sheet: 22px;  --t-card: 20px;
  --t-kpi: 17px;   --t-cta: 15px;   --t-kicker: 12px;   --t-eyebrow: 11px; --t-chip: 10px;
  --t-kpi-label: 9px;
  --p-header: 16px; --p-body: 15px; --p-hint: 13px; --p-foot: 12px;
  --trk-room: .036em; --trk-section: .01em; --trk-kicker: .22em; --trk-eyebrow: .20em;
  --trk-chip: .14em;  --trk-kpi-label: .20em; --trk-cta: .02em;

  /* ---- motion. Four curves and nothing else: the house curve at 120 / 200 /
   * 360ms, and the cine curve at 700ms for a scene change. Anything that
   * continues a finger uses a spring. Registered on the motion skill's names
   * too (--dur-*, --ease-*), so its primitives read this personality unchanged. */
  --m-fast: 120ms;  --m-base: 200ms;  --m-slow: 360ms;  --m-cine: 700ms;
  --ease-house: cubic-bezier(.2, .8, .2, 1);
  --ease-cine:  cubic-bezier(.16, 1, .3, 1);
  --dur-1: 120ms; --dur-2: 160ms; --dur-3: 200ms; --dur-4: 360ms; --dur-5: 700ms; --dur-6: 900ms;
  --ease-standard: var(--ease-house);
  --ease-out: var(--ease-house);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-emphasized: var(--ease-cine);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --move-sm: 8px; --move-md: 14px; --move-lg: 32px; --move-xl: 64px;
  --stagger: 60ms;
  /* Springs, as linear() approximations of the app's SwiftUI springs. Each has
   * its duration beside it; tune both on /lab/console. */
  --spring-seat:       linear(0, .36 15%, .69 30%, .90 45%, 1.012 60%, 1.004 75%, 1);   /* (.38, .12) */
  --spring-seat-dur:   380ms;
  --spring-switch:     linear(0, .42 14%, .82 28%, 1.07 44%, 1.02 60%, .995 76%, 1);    /* (.34, .34) */
  --spring-switch-dur: 340ms;
  --spring-deck:       linear(0, .44 20%, .86 40%, 1.03 60%, 1.005 80%, 1);             /* (.46, .86) */
  --spring-deck-dur:   460ms;
  --spring-settle:     linear(0, .55 22%, 1.10 44%, .97 64%, 1.01 82%, 1);              /* (.55, .72) */
  --spring-settle-dur: 550ms;

  /* ---- space, controls, shape, shadow, layers. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 28px;
  --ctl-sm: 44px; --ctl-md: 48px; --ctl-lg: 56px;
  --r-xs: 6px; --r-sm: 10px; --r-ctl: 14px; --r-card: 20px; --r-sheet: 28px;
  --r-poster: 20px; --r-poster-top: 30px;
  /* THE RAIL SHADOW: the one treatment for a bare glyph over content the app
   * does not control. A filter, applied per LEAF, never to a wrapper. */
  --sh-rail:   drop-shadow(0 1px 6px rgba(0, 0, 0, .6));
  --sh-key:    0 6px 10px rgba(0, 0, 0, .45);
  --sh-sheet:  0 8px 18px rgba(0, 0, 0, .5);
  --sh-poster: 0 6px 15px rgba(0, 0, 0, .55);
  --sh-thumb:  0 1px 4px rgba(0, 0, 0, .45);
  --z-room: 0; --z-page: 1; --z-rail: 40; --z-hud: 50; --z-sheet: 60; --z-notice: 80; --z-skip: 200;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---- the other two ways. Chosen with the app icon on the phone; on the web
 * by the picker on /account, stored per browser (localStorage "pp-way") and
 * bootstrapped inline in layout-app before first paint. The room IS the icon:
 * ground = the icon's field verbatim, dot screens in the rosette's sampled
 * shades. Dim type is paper at reduced strength, not grey: grey sank into the
 * coloured field. */
:root[data-way="pink"] {
  --pass-a: #1B5BE0; --pass-b: #1B1687; --face: #FFFFFF;
  --ground: #FF3D9A; --screen-dot: #E01F7C; --screen-dot-2: #FF7CBB;
  --text-dim: rgba(255, 255, 255, .80); --text-faint: rgba(255, 255, 255, .58);
}
:root[data-way="blue"] {
  --pass-a: #FF3D9A; --pass-b: #1B1687; --face: #FFFFFF;
  --ground: #1B5BE0; --screen-dot: #1746B0; --screen-dot-2: #5A8EF7;
  --text-dim: rgba(255, 255, 255, .80); --text-faint: rgba(255, 255, 255, .58);
}

/* ---- reduced motion: every duration collapses, distances go to zero, springs
 * become linear. The press keeps its DIM (console.css): a press must still
 * register, eyes-on, when the travel is gone. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-fast: 1ms; --m-base: 1ms; --m-slow: 1ms; --m-cine: 1ms;
    --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; --dur-6: 1ms;
    --move-sm: 0px; --move-md: 0px; --move-lg: 0px; --move-xl: 0px; --stagger: 0ms;
    --spring-seat: linear; --spring-switch: linear; --spring-deck: linear; --spring-settle: linear;
    --spring-seat-dur: 1ms; --spring-switch-dur: 1ms; --spring-deck-dur: 1ms; --spring-settle-dur: 1ms;
  }
}

/* ============================================================================
 * LEGACY NAMES. ctxmenu.css, shop.css, photobook-editor.css and the kept host
 * scripts (charts.js, cards.js while it lives) still read tokens.css's names.
 * Each is aliased onto the room so those sheets resolve without an edit; delete
 * an alias only once nothing loaded by layout-app reads it. --rainbow is NOT
 * here on purpose: it died with the old console.
 * ========================================================================== */
:root {
  --bg: var(--void);
  --bg-elev: var(--panel);
  --surface: var(--panel);
  --surface-2: var(--raised);
  --surface-3: var(--edge);
  --border: var(--edge);
  --border-2: var(--line2);
  --muted: var(--text-dim);
  --faint: var(--text-faint);
  --accent: var(--catch);
  --accent-2: var(--text-dim);
  --accent-hi: var(--key-hi);
  --accent-lo: var(--key-lo);
  --accent-quiet: var(--catch-wash);
  --accent-grad: var(--key);
  --accent-glow: 0 0 #0000;
  --brand: var(--catch);
  --ok: var(--hue-green);
  --warn: var(--hue-yellow);
  --err: var(--error);
  --font-ui: var(--program);
  --font-mono-ui: var(--program);
  --font-body: var(--program);
  --font-display: var(--marquee);
  --r-md: var(--r-ctl);
  --r-lg: var(--r-sheet);
  --r-pill: 999px;
  --t-fast: var(--m-fast);
  --t-base: var(--m-base);
  --t-room: var(--m-slow);
  --shadow: var(--sh-sheet);
  --shadow-sm: var(--sh-thumb);
  --elev-card: none;
  --ring-top: 0 0 #0000;
}