/* Swivy design tokens
   Four themes; single source of truth for color, type, spacing, radius, shadow.
*/

:root {
  /* --- Type scale (matched to 15px body) --- */
  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-44: 44px;

  --lh-tight: 1.15;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

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

  /* --- Radius --- */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 12px;
  --r-5: 16px;
  --r-full: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Theme: Warm paper + ink (default) --- */
:root, [data-theme="warm-paper"] {
  --bg: oklch(98.5% 0.006 85);
  --bg-elevated: oklch(99.5% 0.003 85);
  --bg-sunken: oklch(96.5% 0.008 85);
  --bg-code: oklch(97% 0.007 85);
  --panel: oklch(99.5% 0.003 85);

  --ink: oklch(20% 0.015 60);
  --ink-2: oklch(35% 0.012 60);
  --ink-3: oklch(52% 0.01 60);
  --ink-4: oklch(68% 0.008 60);
  --ink-5: oklch(82% 0.006 60);

  --line: oklch(90% 0.008 75);
  --line-2: oklch(86% 0.01 75);
  --line-strong: oklch(76% 0.012 75);

  --accent: oklch(55% 0.13 55);
  --accent-ink: oklch(38% 0.12 55);
  --accent-soft: oklch(94% 0.04 70);
  --accent-contrast: oklch(99% 0.003 85);

  --ok: oklch(55% 0.13 155);
  --ok-soft: oklch(94% 0.04 155);
  --warn: oklch(62% 0.13 80);
  --warn-soft: oklch(94% 0.05 80);
  --danger: oklch(54% 0.16 25);
  --danger-soft: oklch(94% 0.04 25);
  --info: oklch(52% 0.12 240);
  --info-soft: oklch(94% 0.03 240);

  --env-dev: oklch(58% 0.02 270);
  --env-staging: oklch(52% 0.12 240);
  --env-prod: oklch(54% 0.14 40);

  --shadow-sm: 0 1px 0 oklch(0% 0 0 / 0.03), 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-md: 0 2px 4px oklch(0% 0 0 / 0.04), 0 8px 24px oklch(0% 0 0 / 0.06);
  --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.08), 0 32px 80px oklch(0% 0 0 / 0.1);
  --shadow-modal: 0 40px 120px oklch(0% 0 0 / 0.22);

  color-scheme: light;
}

/* --- Theme: Cool editorial --- */
[data-theme="cool-editorial"] {
  --bg: oklch(97.5% 0.008 240);
  --bg-elevated: oklch(99% 0.004 240);
  --bg-sunken: oklch(95% 0.012 240);
  --bg-code: oklch(96% 0.01 240);
  --panel: oklch(99% 0.004 240);

  --ink: oklch(22% 0.025 250);
  --ink-2: oklch(36% 0.02 250);
  --ink-3: oklch(52% 0.018 250);
  --ink-4: oklch(68% 0.014 250);
  --ink-5: oklch(82% 0.01 250);

  --line: oklch(89% 0.012 240);
  --line-2: oklch(85% 0.015 240);
  --line-strong: oklch(74% 0.018 240);

  --accent: oklch(48% 0.13 250);
  --accent-ink: oklch(34% 0.12 250);
  --accent-soft: oklch(93% 0.04 240);
  --accent-contrast: oklch(99% 0.004 240);

  --ok: oklch(52% 0.12 170);
  --ok-soft: oklch(93% 0.035 170);
  --warn: oklch(60% 0.12 80);
  --warn-soft: oklch(93% 0.04 80);
  --danger: oklch(52% 0.16 20);
  --danger-soft: oklch(93% 0.04 20);
  --info: oklch(50% 0.12 240);
  --info-soft: oklch(93% 0.03 240);

  --env-dev: oklch(56% 0.02 260);
  --env-staging: oklch(52% 0.1 190);
  --env-prod: oklch(50% 0.14 30);

  color-scheme: light;
}

/* --- Theme: Neutral technical --- */
[data-theme="neutral-technical"] {
  --bg: oklch(98% 0.002 0);
  --bg-elevated: oklch(99.5% 0.002 0);
  --bg-sunken: oklch(96% 0.003 0);
  --bg-code: oklch(96.5% 0.003 0);
  --panel: oklch(99.5% 0.002 0);

  --ink: oklch(18% 0.002 0);
  --ink-2: oklch(34% 0.002 0);
  --ink-3: oklch(50% 0.002 0);
  --ink-4: oklch(66% 0.002 0);
  --ink-5: oklch(82% 0.002 0);

  --line: oklch(89% 0.003 0);
  --line-2: oklch(84% 0.003 0);
  --line-strong: oklch(74% 0.003 0);

  --accent: oklch(54% 0.13 140);
  --accent-ink: oklch(38% 0.12 140);
  --accent-soft: oklch(94% 0.04 140);
  --accent-contrast: oklch(99% 0.002 0);

  --ok: oklch(54% 0.13 150);
  --ok-soft: oklch(94% 0.04 150);
  --warn: oklch(62% 0.13 80);
  --warn-soft: oklch(94% 0.05 80);
  --danger: oklch(54% 0.16 25);
  --danger-soft: oklch(94% 0.04 25);
  --info: oklch(52% 0.12 240);
  --info-soft: oklch(94% 0.03 240);

  --env-dev: oklch(58% 0.008 0);
  --env-staging: oklch(52% 0.12 240);
  --env-prod: oklch(54% 0.14 30);

  color-scheme: light;
}

/* --- Theme: Dark ink --- */
[data-theme="dark-ink"] {
  --bg: oklch(18% 0.008 70);
  --bg-elevated: oklch(22% 0.01 70);
  --bg-sunken: oklch(15% 0.006 70);
  --bg-code: oklch(21% 0.009 70);
  --panel: oklch(22% 0.01 70);

  --ink: oklch(96% 0.008 70);
  --ink-2: oklch(82% 0.01 70);
  --ink-3: oklch(66% 0.012 70);
  --ink-4: oklch(52% 0.012 70);
  --ink-5: oklch(38% 0.01 70);

  --line: oklch(30% 0.012 70);
  --line-2: oklch(34% 0.014 70);
  --line-strong: oklch(44% 0.016 70);

  --accent: oklch(72% 0.13 65);
  --accent-ink: oklch(82% 0.1 65);
  --accent-soft: oklch(30% 0.05 65);
  --accent-contrast: oklch(18% 0.008 70);

  --ok: oklch(72% 0.13 155);
  --ok-soft: oklch(28% 0.05 155);
  --warn: oklch(78% 0.13 80);
  --warn-soft: oklch(30% 0.05 80);
  --danger: oklch(70% 0.16 25);
  --danger-soft: oklch(30% 0.06 25);
  --info: oklch(70% 0.12 240);
  --info-soft: oklch(28% 0.04 240);

  --env-dev: oklch(66% 0.02 70);
  --env-staging: oklch(68% 0.12 240);
  --env-prod: oklch(72% 0.14 40);

  --shadow-sm: 0 1px 0 oklch(0% 0 0 / 0.2), 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-md: 0 2px 4px oklch(0% 0 0 / 0.3), 0 8px 24px oklch(0% 0 0 / 0.35);
  --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.5), 0 32px 80px oklch(0% 0 0 / 0.5);
  --shadow-modal: 0 40px 120px oklch(0% 0 0 / 0.6);

  color-scheme: dark;
}

/* --- Type direction tweaks --- */
[data-type="grotesk"] {
  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}
[data-type="editorial"] {
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}
[data-type="humanist"] {
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

/* --- Density --- */
[data-density="dense"] {
  --row-h: 32px;
  --pad-card: 16px;
  --pad-section: 24px;
}
[data-density="balanced"] {
  --row-h: 40px;
  --pad-card: 20px;
  --pad-section: 32px;
}
[data-density="spacious"] {
  --row-h: 52px;
  --pad-card: 28px;
  --pad-section: 48px;
}