/* tokens.css - design tokens for the "Precision instrument" system
 *
 * Refined neumorphism: one calm surface that elements extrude from, subtle dual
 * shadows plus a hairline, a single solid indigo accent, and zero gradients.
 * OKLCH throughout. Light and dark are tuned independently.
 */
:root {
  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale */
  --text-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:  clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --text-base:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-md:  clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --text-lg:  clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --text-xl:  clamp(1.875rem, 1.55rem + 1.5vw, 2.75rem);
  --text-2xl: clamp(2.5rem, 1.9rem + 2.8vw, 4rem);

  /* Spacing scale (strict, used everywhere) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Rhythm primitives */
  --section-y: clamp(4rem, 8vw, 7rem);          /* vertical space between sections */
  --container-max: 60rem;
  --container-pad: clamp(1.25rem, 4vw, 2rem);
  --gap-card: var(--space-5);                    /* gap between cards in a grid */
  --pad-card: clamp(1.25rem, 3vw, 1.75rem);     /* internal card padding */

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;

  --touch-min: 44px;
  color-scheme: light dark;
}

/* ─── Light: soft graphite ──────────────────────────────── */
:root, :root[data-theme="light"] {
  color-scheme: light;

  --bg:        oklch(93.5% 0.004 262);          /* the neumorphic surface */
  --nm-dark:   oklch(85% 0.008 262);            /* bottom-right shadow */
  --nm-light:  oklch(99.5% 0.001 262);          /* top-left highlight */

  --ink:       oklch(27% 0.02 264);
  --ink-2:     oklch(44% 0.016 264);
  --ink-3:     oklch(51% 0.014 264);

  --accent:        oklch(50% 0.17 268);
  --accent-hover:  oklch(44% 0.18 268);
  --accent-ink:    oklch(99% 0.01 268);
  --accent-soft:   oklch(50% 0.17 268 / 0.12);
  --accent-ring:   oklch(50% 0.17 268 / 0.5);

  --danger:    oklch(53% 0.19 25);

  --hairline:  oklch(45% 0.02 264 / 0.10);
  --code-ink:  oklch(34% 0.03 268);

  /* Neumorphic shadow recipes */
  --nm-raised:    6px 6px 16px var(--nm-dark), -6px -6px 16px var(--nm-light);
  --nm-raised-lg: 10px 10px 28px var(--nm-dark), -10px -10px 28px var(--nm-light);
  --nm-raised-sm: 3px 3px 8px var(--nm-dark), -3px -3px 8px var(--nm-light);
  --nm-inset:     inset 4px 4px 10px var(--nm-dark), inset -4px -4px 10px var(--nm-light);
  --nm-inset-sm:  inset 2px 2px 6px var(--nm-dark), inset -2px -2px 6px var(--nm-light);
}

/* ─── Dark: slate ───────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        oklch(25% 0.012 265);
  --nm-dark:   oklch(19% 0.01 265);
  --nm-light:  oklch(31% 0.016 265);

  --ink:       oklch(95% 0.005 260);
  --ink-2:     oklch(76% 0.012 260);
  --ink-3:     oklch(66% 0.013 260);

  --accent:        oklch(74% 0.15 270);
  --accent-hover:  oklch(80% 0.14 270);
  --accent-ink:    oklch(22% 0.04 270);
  --accent-soft:   oklch(74% 0.15 270 / 0.16);
  --accent-ring:   oklch(74% 0.15 270 / 0.5);

  --danger:    oklch(72% 0.16 25);

  --hairline:  oklch(100% 0 0 / 0.07);
  --code-ink:  oklch(82% 0.04 270);

  --nm-raised:    6px 6px 16px var(--nm-dark), -6px -6px 16px var(--nm-light);
  --nm-raised-lg: 10px 10px 28px var(--nm-dark), -10px -10px 28px var(--nm-light);
  --nm-raised-sm: 3px 3px 8px var(--nm-dark), -3px -3px 8px var(--nm-light);
  --nm-inset:     inset 4px 4px 10px var(--nm-dark), inset -4px -4px 10px var(--nm-light);
  --nm-inset-sm:  inset 2px 2px 6px var(--nm-dark), inset -2px -2px 6px var(--nm-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: oklch(25% 0.012 265);
    --nm-dark: oklch(19% 0.01 265);
    --nm-light: oklch(31% 0.016 265);
    --ink: oklch(95% 0.005 260);
    --ink-2: oklch(76% 0.012 260);
    --ink-3: oklch(66% 0.013 260);
    --accent: oklch(74% 0.15 270);
    --accent-hover: oklch(80% 0.14 270);
    --accent-ink: oklch(22% 0.04 270);
    --accent-soft: oklch(74% 0.15 270 / 0.16);
    --accent-ring: oklch(74% 0.15 270 / 0.5);
    --danger: oklch(72% 0.16 25);
    --hairline: oklch(100% 0 0 / 0.07);
    --code-ink: oklch(82% 0.04 270);
    --nm-raised: 6px 6px 16px var(--nm-dark), -6px -6px 16px var(--nm-light);
    --nm-raised-lg: 10px 10px 28px var(--nm-dark), -10px -10px 28px var(--nm-light);
    --nm-raised-sm: 3px 3px 8px var(--nm-dark), -3px -3px 8px var(--nm-light);
    --nm-inset: inset 4px 4px 10px var(--nm-dark), inset -4px -4px 10px var(--nm-light);
    --nm-inset-sm: inset 2px 2px 6px var(--nm-dark), inset -2px -2px 6px var(--nm-light);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}