/* tokens.css — the one place the Bakehouse Hood palette exists.
 *
 * Shared by the landing page and the guest meeting client, so the two cannot
 * drift. There is exactly ONE input colour: the violet of the Hood app icon.
 * Everything else is derived from it, which is why the two pages read as one
 * product rather than as two palettes that happen to share a hue.
 *
 * The light surfaces mix --base toward WHITE. The dark meeting chrome mixes the
 * identical --base toward BLACK. That mirroring is the whole trick.
 *
 * ⚠️ Every color-mix() declaration is preceded by a hex fallback, and that is not
 * belt-and-braces. color-mix(in oklch, …) needs Chrome 111 / Safari 16.2 /
 * Firefox 113. Without a fallback an older browser gets an invalid custom
 * property, var() resolves to `initial`, and the page renders black on black —
 * UNREADABLE rather than merely ugly. External guests are exactly the
 * old-browser population, so this is the one place where a stale browser has to
 * degrade gracefully.
 */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/vendor/inter-5.3.0-latin-wght-normal.woff2) format('woff2-variations');
  /* Latin only. U+0000-00FF covers ä ö ü ß, so latin-ext is 37 KB we do not need. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Your one input colour — the violet of the Hood app icon (#b05cc7). */
  --base: oklch(0.6158 0.1754 318.6185);

  --primary: #b05cc7;
  --primary: color-mix(in oklch, var(--base), black 0%);
  --secondary: #c98adb;
  --secondary: color-mix(in oklch, var(--base), white 33%);
  --background: #f6eef8;
  --background: color-mix(in oklch, var(--base), white 90%);
  --dark: #111827;
  --muted: #6b7280;
  --card-bg: #f6eef8;
  --card-bg: color-mix(in oklch, var(--base), white 90%);

  --font: 'Inter Variable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;

  /* The shared gestures. Reused by both pages so a button feels the same in
   * both, not merely the same colour. */
  --pill: 999px;
  --radius-card: 24px;
  --radius-panel: 32px;
  --shadow-sm: 0 16px 28px rgba(17, 24, 39, 0.12);
  --shadow-md: 0 18px 42px rgba(17, 24, 39, 0.18);
  --shadow-lg: 0 34px 58px rgba(17, 24, 39, 0.28);
  --lift: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* The dark meeting chrome: the same construction, mirrored toward black. */
.chrome-dark {
  color-scheme: dark;

  --surface-0: #100b14;
  --surface-0: color-mix(in oklch, var(--base), black 92%);
  --surface-1: #191122;
  --surface-1: color-mix(in oklch, var(--base), black 86%);
  --surface-2: #241730;
  --surface-2: color-mix(in oklch, var(--base), black 78%);
  --surface-3: #31203f;
  --surface-3: color-mix(in oklch, var(--base), black 70%);

  --ink: #f6f2f8;
  --ink: color-mix(in oklch, var(--base), white 92%);
  /* Muted the way the landing page does it — toward the background, not toward
   * a neutral grey, so it stays in the family. */
  --ink-muted: #a99bb0;
  --ink-muted: color-mix(in oklch, var(--ink), var(--surface-0) 35%);

  --accent: var(--secondary);
  --accent-strong: var(--primary);
  /* One ring for two jobs: the active speaker AND :focus-visible. A meeting with
   * two different "this one" outlines reads as two different apps. */
  --ring: var(--secondary);

  /* Hue-rotated from --base at the same lightness/chroma family, so they belong
   * to it rather than looking imported from a generic palette. */
  --danger: oklch(0.58 0.19 25);
  --warn: oklch(0.75 0.15 85);
  --ok: oklch(0.7 0.14 155);
}