/* ─────────────────────────────────────────────────────────────────────────
   KlinGreen — Design Tokens
   Warm-neutral data-forward sustainability aesthetic.
   Brand cyan (#01BAEF) threaded confidently. Warm-tinted grays.
   ──────────────────────────────────────────────────────────────────────── */

:root,
.theme-light {
  /* Native controls (option popups, scrollbars, date pickers) follow the theme. */
  color-scheme: light;

  /* ── Brand cyan (from logo #01BAEF) ─────────────────────────── */
  --brand-50:  oklch(97.5% 0.025 220);
  --brand-100: oklch(94% 0.055 220);
  --brand-200: oklch(88% 0.095 220);
  --brand-400: oklch(78% 0.13 220);
  --brand-600: oklch(70% 0.16 220);   /* ≈ #01BAEF */
  --brand-800: oklch(48% 0.14 220);
  --brand-900: oklch(34% 0.10 220);

  /* ── Sustainability green (secondary brand + success) ───────── */
  --leaf-50:  oklch(97% 0.025 158);
  --leaf-100: oklch(93% 0.06 158);
  --leaf-200: oklch(86% 0.09 158);
  --leaf-400: oklch(70% 0.12 158);
  --leaf-600: oklch(56% 0.12 158);
  --leaf-800: oklch(40% 0.09 158);
  --leaf-900: oklch(28% 0.06 158);

  /* ── Warm neutrals (subtle tan undertone, hue ≈ 70–80) ──────── */
  --gray-0:   oklch(99.2% 0.003 80);
  --gray-50:  oklch(97.5% 0.005 78);
  --gray-100: oklch(95% 0.007 75);
  --gray-200: oklch(91% 0.008 75);
  --gray-300: oklch(84% 0.009 72);
  --gray-400: oklch(71% 0.011 70);
  --gray-500: oklch(57% 0.012 70);
  --gray-600: oklch(46% 0.012 70);
  --gray-700: oklch(35% 0.013 70);
  --gray-800: oklch(25% 0.013 70);
  --gray-900: oklch(17% 0.011 70);
  --gray-950: oklch(11% 0.009 70);

  /* ── Semantic ───────────────────────────────────────────────── */
  --success-bg:     oklch(96% 0.04 158);
  --success-border: oklch(80% 0.10 158);
  --success-text:   oklch(40% 0.09 158);
  --success-solid:  oklch(56% 0.12 158);

  --warning-bg:     oklch(97% 0.045 80);
  --warning-border: oklch(82% 0.13 80);
  --warning-text:   oklch(42% 0.10 60);
  --warning-solid:  oklch(72% 0.155 70);

  --danger-bg:      oklch(96% 0.03 25);
  --danger-border:  oklch(80% 0.11 25);
  --danger-text:    oklch(42% 0.16 25);
  --danger-solid:   oklch(58% 0.18 25);

  --info-bg:        oklch(96% 0.03 245);
  --info-border:    oklch(82% 0.10 245);
  --info-text:      oklch(42% 0.13 245);
  --info-solid:     oklch(58% 0.15 245);

  /* ── Surface (light mode) ───────────────────────────────────── */
  --bg-primary:   var(--gray-0);
  --bg-secondary: var(--gray-50);
  --bg-tertiary:  var(--gray-100);
  --bg-inverse:   var(--gray-900);
  --bg-canvas:    oklch(98.5% 0.005 78);

  /* ── Text ───────────────────────────────────────────────────── */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);
  --text-on-brand:  #ffffff;
  --text-link:      var(--brand-800);

  /* ── Border ─────────────────────────────────────────────────── */
  --border-subtle:  oklch(93% 0.007 75);
  --border-default: oklch(88% 0.008 72);
  --border-strong:  oklch(75% 0.010 70);
  --border-focus:   var(--brand-600);
  /* Form-control resting/hover borders — kept ≥3:1 vs their surface for WCAG 2.1
     AA 1.4.11 (UI-component contrast). Separate from --border-default so card and
     divider hairlines stay soft. */
  --border-control:       oklch(64% 0.010 70);
  --border-control-hover: oklch(55% 0.010 70);

  /* ── Elevation (light) ──────────────────────────────────────── */
  --elev-1: 0 1px 2px -1px oklch(20% 0.01 70 / 0.06),
            0 1px 2px oklch(20% 0.01 70 / 0.04);
  --elev-2: 0 1px 2px oklch(20% 0.01 70 / 0.04),
            0 4px 12px -2px oklch(20% 0.01 70 / 0.08);
  --elev-3: 0 4px 8px -2px oklch(20% 0.01 70 / 0.08),
            0 12px 24px -6px oklch(20% 0.01 70 / 0.12);
  --elev-4: 0 8px 16px -4px oklch(20% 0.01 70 / 0.12),
            0 24px 48px -12px oklch(20% 0.01 70 / 0.18);

  --ring-focus: 0 0 0 3px oklch(70% 0.16 220 / 0.28);

  /* ── Accent surfaces ────────────────────────────────────────── */
  --brand-tint:    oklch(97.5% 0.025 220);
  --brand-on-tint: oklch(34% 0.10 220);
}

/* ─────────────────────────────────────────────────────────────── */
/*  DARK MODE                                                      */
/* ─────────────────────────────────────────────────────────────── */
.theme-dark {
  /* Native controls (option popups, scrollbars, date pickers) follow the theme. */
  color-scheme: dark;

  --bg-primary:   oklch(15% 0.012 240);
  --bg-secondary: oklch(19% 0.013 240);
  --bg-tertiary:  oklch(23% 0.014 240);
  --bg-inverse:   var(--gray-50);
  --bg-canvas:    oklch(12% 0.011 240);

  --text-primary:   oklch(96% 0.005 80);
  --text-secondary: oklch(76% 0.009 75);
  --text-tertiary:  oklch(58% 0.010 70);
  --text-on-brand:  oklch(12% 0.011 240);
  --text-link:      oklch(80% 0.12 220);

  --border-subtle:  oklch(24% 0.013 240);
  --border-default: oklch(30% 0.014 240);
  --border-strong:  oklch(42% 0.015 240);
  --border-focus:   oklch(78% 0.13 220);
  /* Form-control resting/hover borders — kept ≥3:1 vs their surface for WCAG 2.1
     AA 1.4.11. Lighter than the surface in dark mode (inverse of light). */
  --border-control:       oklch(52% 0.014 240);
  --border-control-hover: oklch(62% 0.014 240);

  /* Dark mode uses glow + crisp borders instead of soft shadows */
  --elev-1: 0 0 0 1px oklch(28% 0.014 240),
            0 1px 2px oklch(0% 0 0 / 0.4);
  --elev-2: 0 0 0 1px oklch(30% 0.014 240),
            0 4px 12px oklch(0% 0 0 / 0.4);
  --elev-3: 0 0 0 1px oklch(34% 0.014 240),
            0 12px 28px oklch(0% 0 0 / 0.5);
  --elev-4: 0 0 0 1px oklch(38% 0.014 240),
            0 24px 56px oklch(0% 0 0 / 0.6);

  --ring-focus: 0 0 0 3px oklch(78% 0.13 220 / 0.35);

  --success-bg:     oklch(22% 0.04 158);
  --success-border: oklch(36% 0.08 158);
  --success-text:   oklch(82% 0.10 158);
  --success-solid:  oklch(70% 0.13 158);

  --warning-bg:     oklch(24% 0.05 70);
  --warning-border: oklch(40% 0.10 70);
  --warning-text:   oklch(84% 0.12 80);
  --warning-solid:  oklch(78% 0.15 75);

  --danger-bg:      oklch(22% 0.05 25);
  --danger-border:  oklch(38% 0.12 25);
  --danger-text:    oklch(82% 0.10 25);
  --danger-solid:   oklch(66% 0.17 25);

  --info-bg:        oklch(22% 0.05 245);
  --info-border:    oklch(38% 0.10 245);
  --info-text:      oklch(82% 0.10 245);

  --brand-tint:    oklch(22% 0.05 220);
  --brand-on-tint: oklch(82% 0.12 220);
}

/* ─────────────────────────────────────────────────────────────── */
/*  TYPE, SPACING, RADIUS, MOTION (mode-independent)               */
/* ─────────────────────────────────────────────────────────────── */
:root {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --fs-display-xl: 48px;
  --fs-display-lg: 36px;
  --fs-heading-xl: 28px;
  --fs-heading-lg: 22px;
  --fs-heading-md: 18px;
  --fs-heading-sm: 16px;
  --fs-body-lg:    16px;
  --fs-body-md:    14px;
  --fs-body-sm:    13px;
  --fs-caption:    12px;
  --fs-label:      11px;

  /* Line heights */
  --lh-display: 1.1;
  --lh-heading: 1.25;
  --lh-body:    1.5;
  --lh-tight:   1.35;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:     0;
  --ls-label:    0.04em;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Spacing (4px base) */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;

  /* Radius */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Motion */
  --dur-instant: 0ms;
  --dur-fast:    100ms;
  --dur-default: 200ms;
  --dur-slow:    350ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --content-max: 1280px;
  --sidebar-w:   240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:    56px;
  --row-h:       44px; /* default density */
}

/* Density modes (overrides --row-h) */
[data-density="compact"]    { --row-h: 36px; }
[data-density="dense"]      { --row-h: 32px; }
[data-density="comfortable"]{ --row-h: 44px; }

/* Radius scale variants */
[data-radius="sharp"] { --radius-sm: 0;   --radius-md: 2px; --radius-lg: 4px;  --radius-xl: 8px; }
[data-radius="soft"]  { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; }

/* Accent color variants (override brand-600 + dependents) */
[data-accent="leaf"] {
  --brand-600: oklch(56% 0.12 158);
  --brand-800: oklch(38% 0.09 158);
  --brand-tint: oklch(96% 0.04 158);
  --ring-focus: 0 0 0 3px oklch(56% 0.12 158 / 0.32);
}
[data-accent="indigo"] {
  --brand-600: oklch(58% 0.18 268);
  --brand-800: oklch(42% 0.14 268);
  --brand-tint: oklch(96% 0.03 268);
  --ring-focus: 0 0 0 3px oklch(58% 0.18 268 / 0.32);
}
[data-accent="ember"] {
  --brand-600: oklch(64% 0.16 38);
  --brand-800: oklch(46% 0.13 38);
  --brand-tint: oklch(96% 0.04 38);
  --ring-focus: 0 0 0 3px oklch(64% 0.16 38 / 0.32);
}