/* PopChat design tokens — the single source of color, type, space, and radius for both
   surfaces (public/index.html and public/room.html + public/js/room.js).
   Custom properties only: no component rules live here (contracts/design-tokens.md, cl. 4).
   This is the ONLY file in public/** allowed to carry a color literal; tools/lint-tokens.mjs
   enforces that. */

:root {
  /* ---- elevation ladder (theme-invariant): ground < surface < field < field-hi ---- */
  --ground: #0a0c0b;
  --surface: #141715;
  --field: #1e221f;
  --field-hi: #272c28;

  /* A hairline is decorative and exempt from 3:1 (WCAG 1.4.11 scopes that to components);
     --edge is for a border that is the SOLE boundary of an interactive control and is
     measured at >= 3:1 against both --surface and --field. */
  --hairline: #2b312c;
  --edge: #737a73;

  /* ---- text ---- */
  --text: #e8efe6;
  --text-2: #c7c7cc;
  --text-muted: #8e8e93;

  /* ---- status ---- */
  --danger: #ff453a;
  --presence: #30d158;

  /* ---- accent family (the only roles a theme may override) ---- */
  --accent: #ff6fa3;
  --on-accent: #2b0312;
  --own-bubble: #d04072;
  --own-text: #ffffff;

  /* An accent fill is one derived gradient, so a theme sets --accent and nothing else has
     to be restated per theme. */
  --accent-fill: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 86%, var(--text)),
    color-mix(in srgb, var(--accent) 88%, var(--ground)));
  --accent-fill-hover: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 74%, var(--text)),
    color-mix(in srgb, var(--accent) 96%, var(--ground)));

  /* ---- ambient decoration: alpha over --accent / --ground, no new hue ---- */
  --veil-1: color-mix(in srgb, var(--accent) 4%, transparent);
  --veil-2: color-mix(in srgb, var(--accent) 8%, transparent);
  --veil-3: color-mix(in srgb, var(--accent) 16%, transparent);
  --veil-4: color-mix(in srgb, var(--accent) 25%, transparent);
  --veil-5: color-mix(in srgb, var(--accent) 45%, transparent);
  --scrim: color-mix(in srgb, var(--ground) 72%, transparent);
  --scrim-heavy: color-mix(in srgb, var(--ground) 92%, transparent);
  --shade: color-mix(in srgb, var(--ground) 60%, transparent);
  --sheen: color-mix(in srgb, var(--text) 4%, transparent);

  /* A QR code is scanned by a camera, not read as UI: it needs its own high-contrast pair
     and cannot inherit the dark ladder. */
  --qr-paper: #ffffff;
  --qr-ink: #000000;
  --qr-ink-muted: #48484a;

  /* The wordmark's own face. Rounded rather than monospace: the name is friendly and the
     type should agree with it. ui-rounded is SF Pro Rounded on Apple platforms, which is
     where most of these rooms are opened; everything after it is a graceful fallback, and
     no web font is loaded, so the wordmark costs no request and leaks nothing. */
  --font-brand: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui,
    -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;

  /* ---- type scale (8 steps; body floor 15px, FR-005) ---- */
  --fs-label: 12px;
  --fs-caption: 13px;
  --fs-secondary: 15px;
  --fs-body: 16.5px;
  --fs-title: 20px;
  --fs-section: 24px;
  --fs-screen: 28px;
  --fs-display: clamp(30px, 10vw, 60px);

  /* ---- space scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 44px;

  /* ---- radius scale ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---- control sizing ---- */
  --tap-primary: 44px;
  --tap-secondary: 34px;

  /* Swatches in the theme picker must show a theme's fill while a different theme is
     active, so each one is published as its own token rather than read from the
     [data-theme] block that is not currently applied. */
  --swatch-green: #2f7d54;
  --swatch-blue: #0a6cff;
  --swatch-purple: #795afa;
  --swatch-pink: #d04072;
  --swatch-orange: #ba5c23;
  --swatch-teal: #0c857b;
  --swatch-red: #d83a3a;
}

/* The default above is pink, which is what an untouched browser gets and what the theme
   picker opens on. It is a deliberate choice, not the first entry in a list: a green
   terminal palette reads as a security appliance, and this is a tool for ordinary
   conversation. Every theme below, green included, is a per-device preference on top.

   Each theme sets exactly --accent, --on-accent, --own-bubble, --own-text
   (contracts/design-tokens.md, cl. 3). Surface, border, and text roles are invariant, which
   is what keeps the contrast table finite: two rows per theme.
   Every --own-bubble below is measured at >= 4.5:1 against --own-text; the original blues,
   purples, pinks, oranges, and teals were darkened until they reached it. */
[data-theme="green"] {
  --accent: #4ade80;
  --on-accent: #04140a;
  --own-bubble: #2f7d54;
  --own-text: #ffffff;
}
[data-theme="blue"] {
  --accent: #4da6ff;
  --on-accent: #03142b;
  --own-bubble: #0a6cff;
  --own-text: #ffffff;
}
[data-theme="purple"] {
  --accent: #a78bfa;
  --on-accent: #15082e;
  --own-bubble: #795afa;
  --own-text: #ffffff;
}
[data-theme="pink"] {
  --accent: #ff6fa3;
  --on-accent: #2b0312;
  --own-bubble: #d04072;
  --own-text: #ffffff;
}
[data-theme="orange"] {
  --accent: #ff9a4d;
  --on-accent: #2b1403;
  --own-bubble: #ba5c23;
  --own-text: #ffffff;
}
[data-theme="teal"] {
  --accent: #2dd4bf;
  --on-accent: #03201c;
  --own-bubble: #0c857b;
  --own-text: #ffffff;
}
[data-theme="red"] {
  --accent: #ff6b6b;
  --on-accent: #2b0404;
  --own-bubble: #d83a3a;
  --own-text: #ffffff;
}

/* Pairs the lint measures. Each line is `text on surface` or `ink on fill`; a text pair
   must reach 4.5:1 and a control's sole boundary 3:1. Decorative separators
   (--hairline) are exempt by design and are listed as such.
   @contrast text --text --ground
   @contrast text --text --surface
   @contrast text --text --field
   @contrast text --text-2 --surface
   @contrast text --text-2 --ground
   @contrast text --text-muted --ground
   @contrast text --text-muted --surface
   @contrast text --text-muted --field
   @contrast text --danger --surface
   @contrast text --danger --ground
   @contrast text --presence --ground
   @contrast text --qr-ink --qr-paper
   @contrast text --qr-ink-muted --qr-paper
   @contrast border --edge --surface
   @contrast border --edge --field
   @contrast exempt --hairline --surface
   @contrast theme-accent --accent --ground
   @contrast theme-accent --accent --surface
   @contrast theme-ink --on-accent --accent
   @contrast theme-ink --own-text --own-bubble
*/