/**
 * Shared shadcn semantic tokens (oklch) for @olo-platform/ui islands.
 * Imported by apps/client/src/features/tailwind.css — toggled via `html.dark`.
 */

/**
 * Shared shadcn semantic tokens (oklch) for @olo-platform/ui islands.
 * Imported by apps/client/src/features/tailwind.css — toggled via `html.dark`.
 *
 * `:root` — warm washi (和紙) paper palette: cream surfaces, sumi-ink text, terracotta accents.
 * `.dark` — stone/navy dark theme (unchanged).
 */

:root {
  /* Canvas — warm washi paper */
  --background: oklch(0.945 0.022 85);
  --foreground: oklch(0.30 0.038 58);
  --card: oklch(0.978 0.014 86);
  --card-foreground: oklch(0.30 0.038 58);
  --popover: oklch(0.978 0.014 86);
  --popover-foreground: oklch(0.30 0.038 58);
  /* Bengara / terracotta — traditional warm pigment */
  --primary: oklch(0.50 0.13 42);
  --primary-foreground: oklch(0.98 0.012 88);
  --secondary: oklch(0.915 0.028 82);
  --secondary-foreground: oklch(0.34 0.04 58);
  --muted: oklch(0.910 0.025 82);
  --muted-foreground: oklch(0.50 0.035 62);
  --accent: oklch(0.885 0.038 78);
  --accent-foreground: oklch(0.32 0.04 58);
  --destructive: oklch(0.55 0.20 27);
  /* Warm paper-toned borders */
  --border: oklch(0.82 0.028 78);
  --input: oklch(0.85 0.025 80);
  --ring: oklch(0.50 0.13 42);
  /* Chart palette — natural warm pigments */
  --chart-1: oklch(0.52 0.13 42);
  --chart-2: oklch(0.55 0.10 145);
  --chart-3: oklch(0.48 0.10 260);
  --chart-4: oklch(0.68 0.12 72);
  --chart-5: oklch(0.52 0.12 340);
  /* Drive/cmd_vel chart + active control fill — deep matcha green on warm paper */
  --control-active: oklch(0.44 0.11 152);
  --control-active-foreground: oklch(0.98 0.012 88);
  --radius: 0.875rem;
  --sidebar: oklch(0.935 0.024 84);
  --sidebar-foreground: oklch(0.30 0.038 58);
  --sidebar-primary: oklch(0.50 0.13 42);
  --sidebar-primary-foreground: oklch(0.98 0.012 88);
  --sidebar-accent: oklch(0.885 0.038 78);
  --sidebar-accent-foreground: oklch(0.32 0.04 58);
  --sidebar-border: oklch(0.82 0.028 78);
  --sidebar-ring: oklch(0.50 0.13 42);
  /* Card tier ladder — warm hue held constant, lightness steps for contrast */
  --surface-card-header: oklch(0.855 0.040 79);
  --surface-body: oklch(0.910 0.030 83);
  --surface-well: oklch(0.885 0.034 81);
  --surface-inset: oklch(0.862 0.038 80);
  /* Right-hand detail canvas (topics, nodes, rosbag, video) — matches shell background in light mode */
  --surface-detail-canvas: var(--background);
  /* Canvas chart fills — matches panel viz inset tier (cmd_vel, LiDAR, sparklines) */
  --chart-canvas-bg: var(--surface-inset);
  --chart-axis: var(--muted-foreground);
  --chart-turn: oklch(0.72 0.17 52);
  /* Floating window + tab bar (light — warm paper chrome) */
  --window-header-bg: oklch(0.895 0.032 83);
  --window-header-border: oklch(0.82 0.028 78);
  --window-header-foreground: oklch(0.30 0.038 58);
  --window-header-muted-foreground: oklch(0.50 0.035 62);
  --window-shell-border: oklch(0.82 0.028 78);
  --window-shell-shadow: 0 12px 40px oklch(0.30 0.038 58 / 0.10), 0 0 0 1px oklch(0.82 0.028 78);
  /*
   * Tab state ladder — overlays of the bar, never absolute colours. `inactive` must stay
   * `transparent` and `hover` must stay weaker than `focus`, or hover starts impersonating
   * selection (OLO-1811). Guarded by tests/windowTabTokenLadder.test.mjs.
   */
  --window-tab-inactive-bg: transparent;
  --window-tab-hover-bg: oklch(0.50 0.13 42 / 0.14);
  --window-tab-border: oklch(0.82 0.028 78);
  --window-tab-foreground: oklch(0.44 0.034 60);
  --window-tab-muted-foreground: oklch(0.54 0.032 62);
  --window-tab-icon-opacity: 0.7;
  --window-focus-header-bg: oklch(0.845 0.042 79);
  --window-focus-header-border: oklch(0.50 0.13 42 / 0.45);
  --window-focus-header-foreground: oklch(0.28 0.04 58);
  --window-focus-header-muted-foreground: oklch(0.42 0.038 60);
  --window-focus-shell-border: oklch(0.50 0.13 42 / 0.38);
  --window-focus-shell-shadow: 0 12px 40px oklch(0.30 0.038 58 / 0.12), 0 0 0 1px oklch(0.50 0.13 42 / 0.28), 0 0 24px oklch(0.50 0.13 42 / 0.10);
  /* Resize / sash / tiled-edge affordances — terracotta, never unthemed white. */
  --window-resize-edge-glow: oklch(0.50 0.13 42 / 0.42);
  --window-chrome-hover: oklch(0.50 0.13 42 / 0.16);
  --window-boundary-hover-core: oklch(0.50 0.13 42 / 0.88);
  --window-boundary-hover-glow: oklch(0.50 0.13 42 / 0.28);
  --window-tab-focus-bg: oklch(0.50 0.13 42 / 0.34);
  --window-tab-focus-foreground: oklch(0.26 0.042 58);
  /* Reserved for the selected tab alone — do not reuse for decoration. */
  --window-tab-focus-accent: oklch(0.50 0.13 42);
  --window-tab-focus-border: oklch(0.50 0.13 42 / 0.45);
  --window-tab-focus-ring-color: oklch(0.50 0.13 42 / 0.30);
  --window-tab-focus-shadow-color: oklch(0.30 0.038 58 / 0.18);
  /* Window title-bar control buttons — tuned for warm paper header */
  --window-control-color: oklch(0.50 0.035 62);
  --window-control-disabled-color: oklch(0.72 0.022 82);
  --window-control-hover-color: oklch(0.38 0.08 55);
  --window-control-hover-bg: oklch(0.50 0.13 42 / 0.12);
  --window-control-hover-bg-strong: oklch(0.50 0.13 42 / 0.18);
  --window-control-minimize-hover-color: oklch(0.62 0.16 55);
  --window-control-minimize-hover-bg: oklch(0.62 0.16 55 / 0.14);
  --window-control-close-hover-color: oklch(0.42 0.16 25);
  --window-control-close-hover-bg: oklch(0.55 0.20 27 / 0.12);
}

.dark {
  --background: oklch(0.147 0.004 49.25);
  --foreground: oklch(0.985 0.001 106.423);
  --card: oklch(0.216 0.006 56.043);
  --card-foreground: oklch(0.985 0.001 106.423);
  --popover: oklch(0.216 0.006 56.043);
  --popover-foreground: oklch(0.985 0.001 106.423);
  --primary: oklch(0.443 0.11 240.79);
  --primary-foreground: oklch(0.977 0.013 236.62);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.268 0.007 34.298);
  --muted-foreground: oklch(0.709 0.01 56.259);
  --accent: oklch(0.268 0.007 34.298);
  --accent-foreground: oklch(0.985 0.001 106.423);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.553 0.013 58.071);
  --chart-1: oklch(0.808 0.114 19.571);
  --chart-2: oklch(0.637 0.237 25.331);
  --chart-3: oklch(0.577 0.245 27.325);
  --chart-4: oklch(0.505 0.213 27.518);
  --chart-5: oklch(0.444 0.177 26.899);
  --control-active: #34d399;
  --control-active-foreground: #ffffff;
  --sidebar: oklch(0.216 0.006 56.043);
  --sidebar-foreground: oklch(0.985 0.001 106.423);
  --sidebar-primary: oklch(0.685 0.169 237.323);
  --sidebar-primary-foreground: oklch(0.293 0.066 243.157);
  --sidebar-accent: oklch(0.268 0.007 34.298);
  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.553 0.013 58.071);
  --surface-card-header: oklch(0.195 0.006 56.043);
  --surface-body: oklch(0.228 0.006 56.043);
  --surface-well: oklch(0.252 0.007 34.298);
  --surface-inset: oklch(0.155 0.004 49.25);
  /* Right-hand detail canvas — one step lighter than shell background, still below card sidebar */
  --surface-detail-canvas: oklch(0.168 0.005 52);
  --chart-canvas-bg: var(--surface-inset);
  --chart-axis: oklch(0.55 0.01 56.259);
  --chart-turn: oklch(0.72 0.17 52);
  /* Floating window + tab bar focus chrome (dark / palette B — near-black focus) */
  --window-header-bg: #2a2a2a;
  --window-header-border: rgba(255, 255, 255, 0.04);
  --window-header-foreground: oklch(0.985 0.001 106.423);
  --window-header-muted-foreground: oklch(0.709 0.01 56.259);
  --window-shell-border: rgba(255, 255, 255, 0.03);
  --window-shell-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.35);
  /* See the `:root` note — same invariant, white overlays instead of terracotta. */
  --window-tab-inactive-bg: transparent;
  --window-tab-hover-bg: rgba(255, 255, 255, 0.08);
  --window-tab-border: rgba(255, 255, 255, 0.06);
  --window-tab-foreground: oklch(0.76 0.008 56);
  --window-tab-muted-foreground: oklch(0.62 0.010 56);
  --window-tab-icon-opacity: 0.7;
  --window-focus-header-bg: #000000;
  --window-focus-header-border: rgba(255, 255, 255, 0.06);
  --window-focus-header-foreground: oklch(0.985 0.001 106.423);
  --window-focus-header-muted-foreground: oklch(0.709 0.01 56.259);
  --window-focus-shell-border: rgba(255, 255, 255, 0.06);
  --window-focus-shell-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.5);
  /* Resize / sash / tiled-edge affordances — navy, not white-on-dark. */
  --window-resize-edge-glow: oklch(0.72 0.12 240 / 0.45);
  --window-chrome-hover: oklch(0.72 0.12 240 / 0.18);
  --window-boundary-hover-core: oklch(0.78 0.15 240 / 0.82);
  --window-boundary-hover-glow: oklch(0.72 0.12 240 / 0.28);
  /*
   * Deliberately no longer #000000 (which matched --window-focus-header-bg). Against the
   * near-black bar that was 1.06:1 — the selected tab read as a gap. The tab↔focused-window
   * link now lives in --window-tab-focus-accent's hue instead. OLO-1811.
   */
  --window-tab-focus-bg: rgba(255, 255, 255, 0.20);
  --window-tab-focus-foreground: oklch(0.985 0.001 106.423);
  /* Reserved for the selected tab alone — do not reuse for decoration. */
  --window-tab-focus-accent: oklch(0.78 0.15 240);
  --window-tab-focus-border: rgba(255, 255, 255, 0.16);
  --window-tab-focus-ring-color: rgba(255, 255, 255, 0.14);
  --window-tab-focus-shadow-color: rgba(0, 0, 0, 0.55);
  --window-control-color: #999999;
  --window-control-disabled-color: #555555;
  --window-control-hover-color: rgba(255, 255, 255, 0.9);
  --window-control-hover-bg: rgba(255, 255, 255, 0.08);
  --window-control-hover-bg-strong: rgba(255, 255, 255, 0.1);
  --window-control-minimize-hover-color: #f39c12;
  --window-control-minimize-hover-bg: rgba(243, 156, 18, 0.15);
  --window-control-close-hover-color: #ffffff;
  --window-control-close-hover-bg: rgba(255, 255, 255, 0.1);
}