/* Hidrogen design tokens */
:root {
  /* type */
  --font-ui: "Ubuntu", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Ubuntu", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Ubuntu Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* accent (saffron / hidrogen warm) */
  --accent: oklch(0.745 0.16 62);
  --accent-fg: oklch(0.18 0.02 60);
  --accent-soft: oklch(0.745 0.16 62 / 0.14);
  --accent-line: oklch(0.745 0.16 62 / 0.32);

  /* semantic */
  --pos: oklch(0.70 0.14 155);
  --pos-soft: oklch(0.70 0.14 155 / 0.14);
  --neg: oklch(0.66 0.19 28);
  --neg-soft: oklch(0.66 0.19 28 / 0.14);
  --info: oklch(0.70 0.12 240);
  --info-soft: oklch(0.70 0.12 240 / 0.14);
  --warn: oklch(0.80 0.15 88);
  --warn-soft: oklch(0.80 0.15 88 / 0.14);

  /* radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;

  /* spacing rhythm */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-8: 32px;
  --gap-10: 40px;

  /* easing */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Dark (default) */
:root, [data-theme="dark"] {
  --bg: oklch(0.165 0.006 70);
  --bg-elev: oklch(0.195 0.006 70);
  --surface: oklch(0.215 0.006 70);
  --surface-2: oklch(0.245 0.006 70);
  --surface-3: oklch(0.275 0.006 70);
  --border: oklch(0.31 0.006 70);
  --border-strong: oklch(0.40 0.008 70);
  --text: oklch(0.965 0.005 80);
  --text-muted: oklch(0.68 0.01 80);
  --text-dim: oklch(0.52 0.01 80);
  --shadow-1: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-2: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 8px 24px -8px oklch(0 0 0 / 0.5);
  --grid-line: oklch(1 0 0 / 0.04);
}

[data-theme="light"] {
  --bg: oklch(0.985 0.004 80);
  --bg-elev: oklch(0.975 0.004 80);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.98 0.004 80);
  --surface-3: oklch(0.96 0.004 80);
  --border: oklch(0.91 0.005 80);
  --border-strong: oklch(0.82 0.006 80);
  --text: oklch(0.20 0.006 70);
  --text-muted: oklch(0.48 0.008 80);
  --text-dim: oklch(0.62 0.008 80);
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.06), 0 0 0 1px oklch(0 0 0 / 0.03);
  --shadow-2: 0 1px 2px oklch(0 0 0 / 0.04), 0 12px 32px -10px oklch(0 0 0 / 0.12);
  --grid-line: oklch(0 0 0 / 0.05);
  --accent-fg: oklch(1 0 0);
}

/* Density */
[data-density="compact"] {
  --row-h: 36px;
  --pad-card: 16px;
  --text-body: 13px;
}
[data-density="comfortable"], :root {
  --row-h: 44px;
  --pad-card: 20px;
  --text-body: 14px;
}
[data-density="roomy"] {
  --row-h: 52px;
  --pad-card: 28px;
  --text-body: 15px;
}

/* ─── Body baseline ─── */
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
}
#root { height: 100vh; }
* { box-sizing: border-box; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }