/* Jeanus design tokens: the design system's semantic colors (oklch) and the Jeanus roles on top.
   Each token holds its light and dark value; <html data-theme> overrides the OS preference. */
:root {
  color-scheme: light dark;
  /* Screen width thresholds, written out in media queries (which cannot read them); a test accepts no other.
     Below --bp-shell, phones and tablets get the mobile shell; below --bp-phone, the phone's density. */
  --bp-phone: 768px;
  --bp-shell: 1100px;
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --shadow-xs: 0 1px 2px 0 light-dark(oklch(0 0 0 / 0.05), oklch(0 0 0 / 0.3));
  --shadow-sm: 0 1px 3px 0 light-dark(oklch(0 0 0 / 0.08), oklch(0 0 0 / 0.35)),
               0 1px 2px -1px light-dark(oklch(0 0 0 / 0.08), oklch(0 0 0 / 0.35));
  /* Navigation shadows, the voile and the easing, shared by menus, toasts, sheets and the dragged row. */
  --shadow-float: 0 1px 3px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.08);
  --shadow-toast: 0 8px 24px oklch(0 0 0 / 0.08), 0 1px 3px oklch(0 0 0 / 0.04);
  --shadow-lifted: 0 16px 40px oklch(0 0 0 / 0.35);
  --scrim: oklch(0 0 0 / 0.45);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --background: light-dark(oklch(1 0 0), oklch(0.145 0 0));
  --foreground: light-dark(oklch(0% 0 0), oklch(0.985 0 0));
  --card: light-dark(oklch(1 0 0), oklch(0.205 0 0));
  --card-foreground: light-dark(oklch(0% 0 0), oklch(0.985 0 0));
  --popover: light-dark(oklch(1 0 0), oklch(0.205 0 0));
  --popover-foreground: light-dark(oklch(0% 0 0), oklch(0.985 0 0));
  --secondary: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  --secondary-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
  --muted: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  /* Light value darker than the design system (0.556) so muted text keeps 4.5:1 on --surface. */
  --muted-foreground: light-dark(oklch(0.53 0 0), oklch(0.708 0 0));
  --accent: light-dark(oklch(0.97 0 0), oklch(0.371 0 0));
  --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
  --destructive: light-dark(oklch(0.577 0.245 27.325), oklch(0.704 0.191 22.216));
  --destructive-foreground: light-dark(oklch(0.97 0.01 17), oklch(0.58 0.22 27));
  --border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
  --input: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 15%));
  --sidebar: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
  --sidebar-foreground: light-dark(oklch(0% 0 0), oklch(0.985 0 0));
  --sidebar-accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  --sidebar-accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
  --sidebar-border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
  --surface: light-dark(oklch(0.98 0 0), oklch(0.2 0 0));
  --surface-foreground: light-dark(oklch(0% 0 0), oklch(0.708 0 0));
  --selection: light-dark(oklch(0% 0 0), oklch(0.922 0 0));
  --selection-foreground: light-dark(oklch(1 0 0), oklch(0.205 0 0));

  /* Jeanus roles: one accent (what awaits a human) and muted statuses. */
  --jx-accent: light-dark(oklch(0.52 0.17 256), oklch(0.74 0.14 254));
  --jx-accent-fg: light-dark(oklch(0.99 0 0), oklch(0.16 0 0));
  --jx-accent-soft: light-dark(oklch(0.52 0.17 256 / 0.10), oklch(0.74 0.14 254 / 0.16));
  --jx-accent-line: light-dark(oklch(0.52 0.17 256 / 0.40), oklch(0.74 0.14 254 / 0.50));
  --jx-agent-soft: light-dark(oklch(0.52 0.17 256 / 0.045), oklch(0.74 0.14 254 / 0.07));
  --jx-wait: light-dark(oklch(0.50 0.11 68), oklch(0.82 0.12 80));
  --jx-wait-soft: light-dark(oklch(0.50 0.11 68 / 0.12), oklch(0.82 0.12 80 / 0.14));
  --jx-ok: light-dark(oklch(0.46 0.11 152), oklch(0.78 0.13 154));
  --jx-ok-soft: light-dark(oklch(0.46 0.11 152 / 0.12), oklch(0.78 0.13 154 / 0.14));
  --jx-no: light-dark(oklch(0.50 0.18 25), oklch(0.74 0.16 25));
  --jx-no-soft: light-dark(oklch(0.50 0.18 25 / 0.10), oklch(0.74 0.16 25 / 0.14));
  --jx-scribe: light-dark(oklch(0.48 0.09 195), oklch(0.78 0.10 195));
  --jx-scribe-soft: light-dark(oklch(0.48 0.09 195 / 0.12), oklch(0.78 0.10 195 / 0.16));
  --jx-orchestrateur: light-dark(oklch(0.48 0.13 302), oklch(0.78 0.12 302));
  --jx-orchestrateur-soft: light-dark(oklch(0.48 0.13 302 / 0.12), oklch(0.78 0.12 302 / 0.16));
  --jx-analyse: light-dark(oklch(0.46 0.11 96), oklch(0.85 0.15 98));
  --jx-analyse-soft: light-dark(oklch(0.46 0.11 96 / 0.12), oklch(0.85 0.15 98 / 0.16));
  --jx-accueil: light-dark(oklch(0.46 0.09 128), oklch(0.78 0.11 128));
  --jx-accueil-soft: light-dark(oklch(0.46 0.09 128 / 0.12), oklch(0.78 0.11 128 / 0.16));
  /* Agent colors (Agents::Agent::COLORS): names stay at 4.9:1 or more on every message background. */
  --jx-agent-violet: light-dark(oklch(0.50 0.14 302), oklch(0.78 0.12 302));
  --jx-agent-teal: light-dark(oklch(0.50 0.085 195), oklch(0.78 0.10 195));
  --jx-agent-amber: light-dark(oklch(0.50 0.11 68), oklch(0.82 0.12 80));
  --jx-agent-rose: light-dark(oklch(0.50 0.16 10), oklch(0.78 0.12 10));
  --jx-agent-sky: light-dark(oklch(0.50 0.11 240), oklch(0.78 0.11 240));
  --jx-agent-lime: light-dark(oklch(0.49 0.11 135), oklch(0.80 0.13 135));

  /* Action buttons carry the company blue; the dark value is darker than the theme's (0.58) so
     white button text keeps 4.5:1. */
  --primary: light-dark(oklch(0.52 0.17 256), oklch(0.56 0.19 257));
  --primary-foreground: light-dark(oklch(0.99 0 0), oklch(0.99 0 0));
  --ring: light-dark(oklch(0.52 0.17 256 / 0.55), oklch(0.74 0.14 254 / 0.55));

  /* The logo's own colours (Figma Jaas/Logo), never used elsewhere: on dark its tile is tinted to keep its edge. */
  --brand-tile: light-dark(#14170f, #262b1c);
  --brand-word: light-dark(#14170f, #f5f6ef);

  /* Chart series: muted blue-grey, teal, sand, slate, dusty violet; never the accent. Below a threshold: the
     status red. */
  --chart-1: light-dark(oklch(0.56 0.06 245), oklch(0.74 0.06 245));
  --chart-2: light-dark(oklch(0.56 0.08 190), oklch(0.76 0.09 190));
  --chart-3: light-dark(oklch(0.68 0.08 78), oklch(0.80 0.08 78));
  --chart-4: light-dark(oklch(0.44 0.02 260), oklch(0.64 0.02 260));
  --chart-5: light-dark(oklch(0.54 0.08 310), oklch(0.74 0.08 310));
  --chart-grid: light-dark(oklch(0.92 0 0), oklch(1 0 0 / 12%));
  --chart-text: light-dark(oklch(0.45 0 0), oklch(0.80 0 0));
  --chart-below: var(--jx-no);

  /* Document palette, Notion's names: each text color keeps 4.5:1 on the page grounds and on every fill, both themes
     (DocumentPaletteContrastTest). Names never change; shades may. */
  --doc-color-gray:   light-dark(oklch(0.50 0 0),        oklch(0.74 0 0));
  --doc-color-brown:  light-dark(oklch(0.47 0.06 50),    oklch(0.75 0.06 55));
  --doc-color-orange: light-dark(oklch(0.52 0.14 55),    oklch(0.80 0.13 60));
  --doc-color-yellow: light-dark(oklch(0.52 0.11 85),    oklch(0.84 0.13 90));
  --doc-color-green:  light-dark(oklch(0.46 0.11 152),   oklch(0.78 0.13 154));
  --doc-color-blue:   light-dark(oklch(0.50 0.15 256),   oklch(0.76 0.13 254));
  --doc-color-purple: light-dark(oklch(0.50 0.15 302),   oklch(0.78 0.12 302));
  --doc-color-pink:   light-dark(oklch(0.52 0.16 350),   oklch(0.78 0.12 350));
  --doc-color-red:    light-dark(oklch(0.50 0.18 25),    oklch(0.74 0.16 25));
  --doc-bg-gray:      light-dark(oklch(0.95 0 0),        oklch(0.34 0 0));
  --doc-bg-brown:     light-dark(oklch(0.95 0.03 55),    oklch(0.34 0.04 55));
  --doc-bg-orange:    light-dark(oklch(0.97 0.06 60),    oklch(0.34 0.07 60));
  --doc-bg-yellow:    light-dark(oklch(0.95 0.09 95),    oklch(0.34 0.07 95));
  --doc-bg-green:     light-dark(oklch(0.95 0.06 152),   oklch(0.33 0.07 152));
  --doc-bg-blue:      light-dark(oklch(0.96 0.05 256),   oklch(0.34 0.08 256));
  --doc-bg-purple:    light-dark(oklch(0.96 0.05 302),   oklch(0.34 0.08 302));
  --doc-bg-pink:      light-dark(oklch(0.97 0.05 350),   oklch(0.34 0.08 350));
  --doc-bg-red:       light-dark(oklch(0.97 0.05 25),    oklch(0.34 0.08 25));

  /* Avatar tones: soft neutrals, never an agent color. */
  --jx-avatar-fg: light-dark(oklch(0.32 0 0), oklch(0.92 0 0));
  --jx-avatar-1: light-dark(oklch(0.92 0.03 250), oklch(0.36 0.04 250));
  --jx-avatar-2: light-dark(oklch(0.92 0.03 200), oklch(0.36 0.04 200));
  --jx-avatar-3: light-dark(oklch(0.92 0.03 150), oklch(0.36 0.04 150));
  --jx-avatar-4: light-dark(oklch(0.93 0.03 80), oklch(0.37 0.04 80));
  --jx-avatar-5: light-dark(oklch(0.92 0.03 30), oklch(0.36 0.04 30));
  --jx-avatar-6: light-dark(oklch(0.92 0.03 320), oklch(0.36 0.04 320));

  /* Switch drawing (switch.css reads only these). Light "on" is the accent; dark "on" is deeper than it so the knob keeps 3:1. */
  --switch-on: light-dark(oklch(0.52 0.17 256), oklch(0.58 0.15 256));
  --switch-off: light-dark(oklch(0.87 0.005 286), oklch(0.40 0 0));
  --switch-off-border: light-dark(oklch(0.62 0 0), oklch(0.58 0 0));
  --switch-knob: light-dark(oklch(1 0 0), oklch(0.97 0 0));
  --switch-focus: var(--jx-accent);
  --switch-hint: var(--muted-foreground);
  --switch-shadow: light-dark(oklch(0 0 0 / 0.30), oklch(0 0 0 / 0.50));
  --switch-tap: 44px;

  /* Touch target and density at the desktop's values; phones override them below. */
  --tap: 44px;
  --gutter: 18px;
  --text-body: 13px;
  --text-meta: 13px;
  /* Notch, home indicator and gesture bar once the page covers the screen (viewport-fit=cover); zero on desktop. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* The mobile shell's floating bar: its height, and its gap above the screen's foot. */
  --tab-bar-height: 62px;
  --tab-bar-bottom: max(16px, calc(var(--safe-bottom) + 8px));
  /* The conversation header: it also sets where the side panel starts. */
  --conversation-header-height: 46px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Phones: narrower gutters and larger message text, in rem so the system's text size applies. */
@media (max-width: 767px) {
  :root { --gutter: 16px; --text-body: 0.9375rem; --text-meta: 0.8125rem; }
}

/* Tablets: the floating bar sits 24 px from the edges. */
@media (min-width: 768px) and (max-width: 1099px) {
  :root { --tab-bar-bottom: max(24px, calc(var(--safe-bottom) + 8px)); }
}