/* Design tokens for every app in the suite (voice/, mosaic/, explore/).
   Never fork these: change them here, on main, by a small PR.

   Two layers:
   1. --brand-* and --tone-* are the client's colours. The values below are NEUTRAL
      FALLBACKS only; shared/brand.js overwrites them from config/brand.json at boot,
      so a new client never inherits the previous client's palette.
   2. Everything else (surfaces, text, lines, type, space, hexagon geometry, motion) is
      the suite's own system, set to the client's corporate identity: white space, black
      text, structural greys, one accent colour, hexagons that touch; made with Apple's
      craft: generous space, pill buttons, frosted bars, large soft radii and calm motion.

   Light is the default; [data-theme="dark"] (set by shared/brand.js from brand.theme)
   swaps surfaces and text. Fills that carry text (buttons, selected hexagons) keep the
   brand colour in both themes; colours used AS text are lifted for dark surfaces. */

/* Self-hosted typefaces (OFL, variable weight, Latin). The suite's default is Montserrat;
   brand.typeface in config/brand.json picks another of these (shared/brand.js sets --font). */
@font-face {
  font-family: 'Montserrat';
  src: url(fonts/montserrat-latin-wght-normal.woff2) format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- brand (fallbacks; set from config/brand.json) ---------- */
  --brand-primary: #3D4F6B;          /* primary action, accents, the hexagon letter */
  --brand-primary-strong: #2E3C52;   /* pressed primary */
  --brand-ink: #1C2A44;              /* headings and the wordmark */
  --brand-secondary: #2F5A8F;        /* links, tertiary actions, checkboxes */
  /* brand colours used AS TEXT: one value per theme (brand.js sets the -light/-dark pair,
     the theme picks one), because inline values would otherwise win over the dark theme */
  --brand-primary-text-light: #3D4F6B;   --brand-primary-text-dark: #9FB3D6;
  --brand-secondary-text-light: #2F5A8F; --brand-secondary-text-dark: #9CC0F0;
  --brand-primary-text: var(--brand-primary-text-light);
  --brand-secondary-text: var(--brand-secondary-text-light);
  --on-primary: #FFFFFF;
  --on-secondary: #FFFFFF;

  /* ---------- surfaces: white, with light structural greys ---------- */
  --bg: #F4F6F6;           /* page */
  --bg-haze: #E3E8E8;      /* the soft grey wash at the top of the page */
  --surface: #FFFFFF;      /* cards, fields, panels */
  --surface-2: #FAFBFB;    /* quiet panel */
  --raised: #FFFFFF;       /* dialogs */
  --fill: #EDF0F0;         /* pressed / neutral chips */
  --scrim: rgba(0, 0, 0, .32);
  /* frosted material for bars that float over content (ISI tray, app bar, viewer bar) */
  --glass: color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-blur: saturate(180%) blur(20px);
  --glass-edge: rgba(0, 0, 0, .08);

  /* ---------- text: black copy, cool greys for the quieter lines ---------- */
  --ink: var(--brand-ink);  /* headings */
  --ink-1: #111111;         /* body on light surfaces */
  --ink-2: #55585C;         /* secondary text (≥ 6.5:1 on --surface and --bg) */
  --ink-3: #5F6266;         /* hints, placeholders (≥ 4.5:1 on --surface, --bg, --fill and tinted tiles) */

  /* ---------- lines: the logo's grey and its dilutions ---------- */
  --line: #E3E8E8;          /* hairlines, card edges */
  --line-2: #D2D8D8;        /* tile edges on --bg */
  --line-strong: #888B8D;   /* form-control borders: ≥ 3:1 against --surface (WCAG 1.4.11) */
  --bond: #BBBCBC;          /* the bonds between hexagons */

  /* ---------- feedback ---------- */
  --focus: #464E7E;
  --success: #17794A; --success-text: #17794A; --success-soft: #E8F5EE;
  --danger: #B42318;  --danger-text: #B42318;  --danger-soft: #FDEEEC;
  --demo-ink: #6B4500; --demo-bg: #FFF4DB; --demo-line: #EBCB78;

  /* ---------- type ---------- */
  /* brand.typeface overrides it (shared/brand.js); the same face on every booth device */
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive; /* until the client's lockup art arrives */
  --fs-display: clamp(3rem, 6.4vw, 5.75rem); /* app wordmark (VOICE / MOSAIC / EXPLORE) */
  --fs-h1: clamp(1.5rem, 2.2vw, 2rem);
  --fs-h2: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .8125rem;    /* never below 12px: the form-factor audit flags smaller text */
  --w-head: 600;           /* section headlines */
  --w-light: 300;          /* statements and display lines, set light as in the brand's own titles */
  --track-head: -.012em;   /* headlines sit a little tighter than body text */
  --track-display: -.02em;
  --track-wide: .14em;     /* the client's letter-spaced lockups (tagline, pillars) */
  --track-caps: .06em;

  /* ---------- space, shape, depth ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --pad: clamp(16px, 3vw, 44px);         /* screen gutter */
  --radius-sm: 10px; --radius: 14px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -14px rgba(16, 24, 40, .14);
  --shadow-lg: 0 0 0 .5px rgba(16, 24, 40, .06), 0 32px 64px -24px rgba(16, 24, 40, .32);
  --target: 44px;                         /* minimum touch target */
  --control-h: 52px;                      /* fields and standard buttons */
  --isi-h: 52px;                          /* collapsed ISI tray */
  --isi-space: var(--isi-h);              /* what the page keeps free at the bottom for the tray */
  --demo-strip-h: calc(27px + env(safe-area-inset-top)); /* the prototype strip over the page on phones */
  --top-space: 0px;                       /* what sits above the stage (the strip, when it shows) */
  --appbar-h: 64px;

  /* ---------- hexagons ----------
     Pointy-top regular hexagons: height = width × 2/√3. Tiles sit on one axial grid with
     a uniform gap; bonds are drawn through the gaps so a cluster reads as one molecule. */
  --hex-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --hex-ratio: 1.1547;
  --hex-gap: 8px;
  --hex-tint: 13%;          /* unselected fill: tone mixed into the surface */
  --hex-edge: 34%;          /* unselected outline: tone mixed into the surface */
  --hex-dim: .45;           /* opacity of bonds next to dimmed (unchosen) tiles */

  /* ---------- motion: one easing (the iOS sheet curve), a few durations ---------- */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-tap: 140ms; --t-state: 220ms; --t-screen: 420ms; --t-grow: 560ms; --t-camera: 620ms;
  --stagger: 60ms;

  color-scheme: light;
}

/* ---------- dark: "booth at night" — the brand's reverse look on black ----------
   Text tokens reach 4.5:1 on --surface; --line-strong reaches 3:1. */
:root[data-theme="dark"] {
  --brand-primary-text: var(--brand-primary-text-dark);
  --brand-secondary-text: var(--brand-secondary-text-dark);
  --bg: #000000; --bg-haze: #1A1B1C;
  --surface: #161718; --surface-2: #0E0F10; --raised: #1E1F21;
  --fill: #26282A;
  --scrim: rgba(0, 0, 0, .62);
  --glass: color-mix(in srgb, var(--surface) 78%, transparent);
  --glass-edge: rgba(255, 255, 255, .09);
  --ink: #FFFFFF; --ink-1: #F2F2F2; --ink-2: #BBBCBC; --ink-3: #A4A6A8;
  --line: #2A2C2E; --line-2: #3A3C3F; --line-strong: #888B8D; --bond: #4A4C4E;
  --focus: #A9AFD6;
  --success: #1E8A56; --success-text: #63D29B; --success-soft: #12291E;
  --danger: #C62B1F;  --danger-text: #F58C82; --danger-soft: #331A18;
  --demo-ink: #F3D27A; --demo-bg: #2E2610; --demo-line: #5A4A1A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 32px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 0 0 .5px rgba(255, 255, 255, .06), 0 32px 64px -20px rgba(0, 0, 0, .75);
  --hex-tint: 22%; --hex-edge: 46%;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-tap: 0ms; --t-state: 0ms; --t-screen: 0ms; --t-grow: 0ms; --t-camera: 0ms; --stagger: 0ms; }
}