/* AUTO-GENERATED from frontend/packages/design-tokens/tokens.css — run: node scripts/sync-design-tokens.mjs */
/**
 * Saluvanta Health / Helix Med v3 — canonical design tokens
 * Source of truth for Phase 1 design system (Saluvanta palette mapped to --hlx-*).
 * Sync to static/helix-design-tokens.css via: node scripts/sync-design-tokens.mjs
 */

:root {
  /* Let native controls (inputs, checkboxes, scrollbars) match the theme. */
  color-scheme: light;

  /* Typography */
  --hlx-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  --hlx-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  --hlx-text-base: 15px;
  --hlx-leading: 1.55;
  --hlx-font-feature: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;

  /* Spacing (4px base) */
  --hlx-1: 4px;
  --hlx-2: 8px;
  --hlx-3: 12px;
  --hlx-4: 16px;
  --hlx-5: 20px;
  --hlx-6: 24px;
  --hlx-8: 32px;
  --hlx-10: 40px;
  --hlx-12: 48px;
  --hlx-16: 64px;

  /* Radii */
  --hlx-r-sm: 10px;
  --hlx-r-md: 14px;
  --hlx-r-lg: 18px;

  /* Shadows */
  --hlx-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06);
  --hlx-shadow-md: 0 10px 30px rgba(2, 6, 23, 0.08);

  /* Neutrals — Saluvanta paper-adjacent surfaces */
  --hlx-bg: #F7F4EE;
  --hlx-surface: #FFFFFF;
  --hlx-surface-2: #F4EFE6;
  --hlx-border: #D5D2CB;
  --hlx-text: #0F3D42;
  --hlx-text-2: #55595C;
  --hlx-text-3: #6B7175;

  /* Brand — Saluvanta Health (--deep / --signal) */
  --hlx-primary: #0F3D42;
  --hlx-primary-700: #0A2C30;
  --hlx-focus: #D98C34;

  /* Platform (back office / support chrome) — deep + sage, not purple */
  --hlx-platform-600: #0F3D42;
  --hlx-platform-700: #0A2C30;
  --hlx-platform-800: #072024;

  /* Status */
  --hlx-success: #3F6F4E;
  --hlx-warning: #D98C34;
  --hlx-danger: #dc2626;
  --hlx-info: #7E9A83;

  /* Status tints */
  --hlx-tint-warning: #fff7ed;
  --hlx-tint-danger: #fef2f2;
  --hlx-tint-success: #f0fdf4;
  --hlx-tint-info: #f0f9ff;

  /* Layout */
  --hlx-header-h: 60px;
  --hlx-context-h: 0px;
  --hlx-sidebar-w: 280px;
  --hlx-sidebar-w-collapsed: 76px;
  --hlx-rightpanel-w: 380px;
  --hlx-max-content: 1520px;

  /* Platform / support banners */
  --hlx-banner-offset: 0px;
  --hlx-platform-banner-height: 48px;
  --hlx-support-banner-height: 40px;

  /* Motion */
  --hlx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hlx-fast: 120ms;
  --hlx-normal: 200ms;
}

html[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --hlx-bg: #0A1F22;
  --hlx-surface: #0F3D42;
  --hlx-surface-2: #0C3034;
  --hlx-border: rgba(244, 239, 230, 0.18);
  --hlx-text: #F4EFE6;
  --hlx-text-2: #D8D4CC;
  --hlx-text-3: #A8ADA9;
  --hlx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --hlx-shadow-md: 0 12px 36px rgba(0, 0, 0, 0.45);
  --hlx-tint-warning: rgba(217, 140, 52, 0.16);
  --hlx-tint-danger: rgba(220, 38, 38, 0.16);
  --hlx-tint-success: rgba(63, 111, 78, 0.18);
  --hlx-tint-info: rgba(126, 154, 131, 0.16);
  --hlx-primary: #7E9A83;
  --hlx-primary-700: #93B098;
  --hlx-focus: #D98C34;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hlx-fast: 1ms;
    --hlx-normal: 1ms;
  }
}