/* Sonic Suisse AI Lab — design tokens (single source of truth for every internal AI app).
   Change colours, type or spacing HERE and every app that links this file follows.
   Rules baked in: surfaces follow the Claude app (user ruling 2026-10-13; web and desktop share
   the palette): light = neutral near-white content, a hair darker sidebar, white cards; dark = neutral
   near-blacks (#151515 content, #111111 sidebar, #1f1f1f cards); colour is reserved for the accent, links, states and data series; Helvetica family; light follows the
   OS unless the page or the visitor sets data-theme="light|dark" (see theme.js). --text,
   --text-strong and --muted clear WCAG AA (4.5:1) on bg, card and header in both themes;
   --faint is for secondary marks (disabled controls, separators), not for body text. */

:root {
  color-scheme: light;

  /* surfaces: the Claude app's light theme (web and desktop share it), measured from a screenshot on
     2026-10-13 (content #fcfbfc, sidebar #fafbf8, active row #eeecea): neutral, not a warm ivory */
  --bg: #fcfcfb;
  --card: #ffffff;
  --header: #fafaf8;
  --shell-bg: #fafaf8;        /* sidebar surface: a step darker than the page in both themes */
  --shell-w: 248px;           /* sidebar width; the visitor's dragged width (224 to 400px) overrides it on <html> */
  --nav-hover: rgba(0, 0, 0, .035);      /* soft bar behind a hovered sidebar row or button */
  --nav-active: rgba(0, 0, 0, .06);     /* stronger bar: the current page */
  --raised: #ffffff;
  --line: #e7e7e5;
  --line-soft: #f0f0ee;
  --line-strong: #d4d4d1;
  --track: #ececea;

  /* text: neutral near-black as in the app; muted clears 4.5:1 on every light surface (4.7 on the track) */
  --text: #1c1c1b;
  --text-strong: #0d0d0c;
  --muted: #6a6a67;
  --faint: #8b8b87;

  /* the logo's red "AI": the brand red (hue 352), a shade deeper on light and lighter on dark so it reads
     at 5:1 on the sidebar in both themes. The Sonic mark itself keeps its exact fills. */
  --brand-red: #c50722;

  /* the one brand accent: change this pair to re-skin everything */
  --accent: #2b63b5;          /* link and emphasis colour, shared with LabGuide */
  --accent-hover: #1f4f91;
  --on-accent: #ffffff;
  --accent-tint: rgba(43, 99, 181, .10);

  /* states */
  --ok: #1b7049;
  --warn: #93550f;   /* 4.7:1 on its tint (#9a5a13 was 4.4:1 on the sign-in chip, 2026-10-20) */
  --bad: #b83a3a;
  --ok-tint: rgba(27, 112, 73, .12);
  --warn-tint: rgba(154, 90, 19, .14);
  --bad-tint: rgba(184, 58, 58, .12);
  --neutral-tint: rgba(0, 0, 0, .07);
  --violet: #b5179e;
  --violet-tint: rgba(181, 23, 158, .12);
  --teal: #0e7f74;
  --now: #c4450f;            /* "now" orange: in progress, the roadmap's Today marker (4.5:1 as text on --bg) */
  --now-tint: rgba(196, 69, 15, .12);
  --on-now: #ffffff;
  --done-fill: #0e7f74;      /* solid status pills: white text clears 4.5:1 on these in both themes */
  --now-fill: #c4450f;
  --planned: #6f6f6f;
  /* data classes (as on the options page): patient data, confidential, HR data, internal, public, secrets */
  --data-pat: #b91c1c;
  --data-conf: #4f46e5;
  --data-pers: #7c3aed;
  --data-pseu: #92400e;
  --data-int: #1d4ed8;
  --data-pub: #0369a1;
  --data-sec: #7f1d1d;

  /* data series (validated for both themes in LabGuide) */
  --series-1: #2f6fc4;
  --series-2: #14875b;
  --series-3: #c94d1c;
  --series-4: #7b5bd6;
  --series-5: #8f8f8f;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .10);

  /* typography: Helvetica family, system fallbacks */
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: .78rem;
  --fs-sm: .88rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2.1rem;
  --fs-3xl: 3rem;
  --lh-tight: 1.15;
  --lh-body: 1.55;
  --tracking-caps: .08em;

  /* spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* shape and controls */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --control-h: 40px;          /* every control in a row shares this height */
  --control-h-sm: 32px;
  --content-max: 1120px;
  --gutter: 16px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
}

/* dark theme: OS preference, unless the page pins light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* surfaces: the Claude app's dark theme, measured from a screenshot on 2026-10-13 (sidebar #111111,
       content #151515, bubbles and inputs #1f1f1f, selected row #363636, text #f5f5f5, muted #8c8c8a) */
    --bg: #151515;
    --card: #1f1f1f;
    --header: #111111;
    --shell-bg: #111111;
    --brand-red: #f53d57;
    --nav-hover: rgba(255, 255, 255, .07);
    --nav-active: rgba(255, 255, 255, .145);
    --raised: #262626;
    --line: #2b2b2b;
    --line-soft: #252525;
    --line-strong: #3b3b3b;
    --track: #262626;
    --text: #ededed;
    --text-strong: #f7f7f7;
    --muted: #8c8c8a;
    --faint: #858583;
    --accent: #5b9bdd;
    --accent-hover: #7fb3e8;
    --on-accent: #111111;
    --accent-tint: rgba(91, 155, 221, .16);
    --ok: #4cc684;
    --warn: #e8a45c;
    --bad: #ec7777;
    --ok-tint: rgba(76, 198, 132, .15);
    --warn-tint: rgba(232, 164, 92, .16);
    --bad-tint: rgba(236, 119, 119, .16);
    --neutral-tint: rgba(255, 255, 255, .08);
    --violet: #e36fd0;
    --violet-tint: rgba(227, 111, 208, .16);
    --teal: #1fb3a1;
    --now: #f3823d;
    --now-tint: rgba(243, 130, 61, .16);
    --on-now: #ffffff;
    --done-fill: #0e7f74;
    --now-fill: #c4450f;
    --planned: #666666;
    --data-pat: #ef7b60;
    --data-conf: #a8a8f5;
    --data-pers: #c9a0e8;
    --data-pseu: #eda35a;
    --data-int: #86b8e8;
    --data-pub: #7dd3fc;
    --data-sec: #ff6b6b;
    --series-1: #3987e5;
    --series-2: #199e70;
    --series-3: #d95926;
    --series-4: #9d85e8;
    --series-5: #8a8a8a;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, .55);
  }
}

/* dark theme pinned by the page or the user's switch; .theme-dark: the same on a part of a page (the site tour's Learn
   scene, dark as Learn is) */
:root[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  /* surfaces: the Claude app's dark theme, measured from a screenshot on 2026-10-13 (sidebar #111111,
       content #151515, bubbles and inputs #1f1f1f, selected row #363636, text #f5f5f5, muted #8c8c8a) */
  --bg: #151515;
  --card: #1f1f1f;
  --header: #111111;
  --shell-bg: #111111;
  --brand-red: #f53d57;
  --nav-hover: rgba(255, 255, 255, .07);
  --nav-active: rgba(255, 255, 255, .145);
  --raised: #262626;
  --line: #2b2b2b;
  --line-soft: #252525;
  --line-strong: #3b3b3b;
  --track: #262626;
  --text: #ededed;
  --text-strong: #f7f7f7;
  --muted: #8c8c8a;
  --faint: #858583;
  --accent: #5b9bdd;
  --accent-hover: #7fb3e8;
  --on-accent: #111111;
  --accent-tint: rgba(91, 155, 221, .16);
  --ok: #4cc684;
  --warn: #e8a45c;
  --bad: #ec7777;
  --ok-tint: rgba(76, 198, 132, .15);
  --warn-tint: rgba(232, 164, 92, .16);
  --bad-tint: rgba(236, 119, 119, .16);
  --neutral-tint: rgba(255, 255, 255, .08);
  --violet: #e36fd0;
  --violet-tint: rgba(227, 111, 208, .16);
  --teal: #1fb3a1;
  --now: #f3823d;
  --now-tint: rgba(243, 130, 61, .16);
  --on-now: #ffffff;
  --done-fill: #0e7f74;
  --now-fill: #c4450f;
  --planned: #666666;
  --data-pat: #ef7b60;
  --data-conf: #a8a8f5;
  --data-pers: #c9a0e8;
  --data-pseu: #eda35a;
  --data-int: #86b8e8;
  --data-pub: #7dd3fc;
  --data-sec: #ff6b6b;
  --series-1: #3987e5;
  --series-2: #199e70;
  --series-3: #d95926;
  --series-4: #9d85e8;
  --series-5: #8a8a8a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, .55);
}