/* Nuvora design tokens — extracted verbatim from the original styles.css.
   Semantic tokens for light (:root) and dark ([data-theme="dark"]) schemes.
   Values are OKLCH and must not be transformed at build time.

   The light block also matches [data-theme="light"] (not only :root) so the
   full token set can be scoped to any element — set data-theme + data-theme-pack
   on a wrapper to render that theme inside an otherwise differently-themed page
   (used by the theme-preview cards). The dark block already works this way. */

:root,
[data-theme="light"] {
  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Sizing */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* Light surface */
  --bg: oklch(99% 0.003 250);
  --bg-subtle: oklch(97.5% 0.004 250);
  --bg-muted: oklch(95.5% 0.005 250);
  --bg-hover: oklch(96.5% 0.006 250);
  --surface: #ffffff;
  --surface-2: oklch(98.5% 0.003 250);
  --border: oklch(91% 0.006 250);
  --border-strong: oklch(85% 0.008 250);
  --border-subtle: oklch(94% 0.005 250);

  /* Text */
  --fg: oklch(20% 0.012 250);
  --fg-muted: oklch(45% 0.012 250);
  --fg-subtle: oklch(60% 0.01 250);
  --fg-faint: oklch(72% 0.008 250);

  /* Accent */
  --accent: oklch(56% 0.16 252);
  --accent-hover: oklch(50% 0.17 252);
  --accent-fg: #ffffff;
  --accent-bg: oklch(96% 0.025 252);
  --accent-bg-strong: oklch(92% 0.04 252);
  --accent-border: oklch(82% 0.06 252);

  /* Status — muted at the surface, bolder on text */
  --green: oklch(58% 0.12 155);
  --green-bg: oklch(96% 0.03 155);
  --green-border: oklch(85% 0.06 155);

  --amber: oklch(65% 0.14 75);
  --amber-bg: oklch(96% 0.04 75);
  --amber-border: oklch(85% 0.08 75);

  --red: oklch(58% 0.18 25);
  --red-bg: oklch(96% 0.03 25);
  --red-border: oklch(86% 0.07 25);

  --violet: oklch(58% 0.15 295);
  --violet-bg: oklch(96% 0.03 295);
  /* Theme-independent: matches Badge's previously hardcoded border (same in dark) */
  --violet-border: oklch(82% 0.06 295);

  --teal: oklch(60% 0.1 195);
  --teal-bg: oklch(96% 0.025 195);
  /* Theme-independent: matches Badge's previously hardcoded border (same in dark) */
  --teal-border: oklch(82% 0.05 195);

  /* Orange — hue midway between amber (75) and red (25); lightness/chroma follow amber */
  --orange: oklch(65% 0.14 50);
  --orange-bg: oklch(96% 0.04 50);
  --orange-border: oklch(85% 0.08 50);

  /* Info — aliases the accent family */
  --info: var(--accent);
  --info-bg: var(--accent-bg);
  --info-border: var(--accent-border);

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(20% 0.02 250 / 0.04);
  --shadow: 0 1px 3px oklch(20% 0.02 250 / 0.06), 0 1px 2px oklch(20% 0.02 250 / 0.04);
  --shadow-md: 0 4px 12px oklch(20% 0.02 250 / 0.08), 0 2px 4px oklch(20% 0.02 250 / 0.04);
  --shadow-lg: 0 12px 32px oklch(20% 0.02 250 / 0.12), 0 4px 8px oklch(20% 0.02 250 / 0.06);
  --shadow-overlay: 0 24px 48px oklch(15% 0.02 250 / 0.18), 0 8px 16px oklch(15% 0.02 250 / 0.08);

  /* Layout */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 48px;

  /* Motion */
  --duration-fast: 80ms;
  --duration-base: 120ms;
  --duration-slow: 200ms;
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Z-index scale — brackets the literals components use today
     (nav menu 50, popover/hover-card 100, scrims 180, dialog/tooltip 200, toast 300) */
  --z-sticky: 40; /* sticky headers/toolbars, below all floating layers */
  --z-dropdown: 100; /* menus, popovers, hover cards */
  --z-overlay: 200; /* dialog/sheet/drawer scrims and panels */
  --z-toast: 300; /* toast viewport, above overlays */
  --z-tooltip: 400; /* tooltips, above everything */

  /* Focus ring — the 3px accent-tinted ring shadow used across inputs */
  --focus-ring: 0 0 0 3px var(--accent-bg);
}

[data-theme="dark"] {
  --bg: oklch(15% 0.01 250);
  --bg-subtle: oklch(17% 0.012 250);
  --bg-muted: oklch(20% 0.013 250);
  --bg-hover: oklch(22% 0.014 250);
  --surface: oklch(18% 0.012 250);
  --surface-2: oklch(20% 0.013 250);
  --border: oklch(26% 0.014 250);
  --border-strong: oklch(32% 0.015 250);
  --border-subtle: oklch(22% 0.013 250);

  --fg: oklch(95% 0.005 250);
  --fg-muted: oklch(72% 0.012 250);
  --fg-subtle: oklch(58% 0.014 250);
  --fg-faint: oklch(45% 0.014 250);

  --accent: oklch(70% 0.14 252);
  --accent-hover: oklch(76% 0.14 252);
  --accent-fg: oklch(15% 0.01 250);
  --accent-bg: oklch(25% 0.04 252);
  --accent-bg-strong: oklch(30% 0.06 252);
  --accent-border: oklch(38% 0.08 252);

  --green: oklch(72% 0.13 155);
  --green-bg: oklch(25% 0.04 155);
  --green-border: oklch(35% 0.07 155);

  --amber: oklch(78% 0.14 75);
  --amber-bg: oklch(28% 0.06 75);
  --amber-border: oklch(38% 0.1 75);

  --red: oklch(72% 0.16 25);
  --red-bg: oklch(28% 0.06 25);
  --red-border: oklch(38% 0.1 25);

  --violet: oklch(72% 0.14 295);
  --violet-bg: oklch(28% 0.05 295);
  /* Theme-independent: same as light (Badge's hardcoded value never varied by theme) */
  --violet-border: oklch(82% 0.06 295);

  --teal: oklch(72% 0.1 195);
  --teal-bg: oklch(25% 0.04 195);
  /* Theme-independent: same as light (Badge's hardcoded value never varied by theme) */
  --teal-border: oklch(82% 0.05 195);

  /* Orange — dark variants follow the amber dark pattern */
  --orange: oklch(78% 0.14 50);
  --orange-bg: oklch(28% 0.06 50);
  --orange-border: oklch(38% 0.1 50);

  /* Info — aliases the accent family */
  --info: var(--accent);
  --info-bg: var(--accent-bg);
  --info-border: var(--accent-border);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-overlay: 0 24px 48px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.4);
}

/* Density (documentation-level). Components currently hardcode their geometry
   and will adopt these vars over time; only new vars are defined here, so this
   scope has no effect on existing rendering. */
[data-density="compact"] {
  --control-h: 26px;
  --row-py: 4px;
}