/* 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 moss accent, and zero gradients.
 * The palette is a full surface system: surface, shadows, ink and hairline all
 * carry the accent's temperature. OKLCH throughout; light and dark tuned
 * independently. Type is Fontshare (ITF): Clash Display over Satoshi.
 */
:root {
  /* Type */
  --font-display: "Clash Display", system-ui, -apple-system, sans-serif;
  --font-body: "Satoshi", 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: moss on warm-green stone ───────────────────── */
:root, :root[data-theme="light"] {
  color-scheme: light;

  /* Wider light/dark deltas than before (was ~6-8% lightness, nearly
     invisible once rendered) — the extrusion needs to actually read. */
  --bg:        oklch(91% 0.008 140);            /* the neumorphic surface */
  --nm-dark:   oklch(72% 0.016 140);            /* bottom-right shadow */
  --nm-light:  oklch(99.5% 0.004 140);          /* top-left highlight */

  --ink:       oklch(24% 0.014 155);
  --ink-2:     oklch(42% 0.013 155);
  --ink-3:     oklch(50% 0.012 155);

  --accent:        oklch(50% 0.115 145);
  --accent-hover:  oklch(44% 0.125 145);
  --accent-ink:    oklch(98.5% 0.012 145);
  --accent-soft:   oklch(50% 0.115 145 / 0.14);
  --accent-ring:   oklch(50% 0.115 145 / 0.5);

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

  --hairline:  oklch(35% 0.02 150 / 0.10);
  --code-ink:  oklch(33% 0.04 148);

  /* Neumorphic shadow recipes — larger offset/blur so the shadow has
     presence instead of reading as a faint gradient. */
  --nm-raised:    7px 7px 18px var(--nm-dark), -7px -7px 18px var(--nm-light);
  --nm-raised-lg: 12px 12px 32px var(--nm-dark), -12px -12px 32px var(--nm-light);
  --nm-raised-sm: 4px 4px 10px var(--nm-dark), -4px -4px 10px var(--nm-light);
  --nm-inset:     inset 5px 5px 12px var(--nm-dark), inset -5px -5px 12px var(--nm-light);
  --nm-inset-sm:  inset 3px 3px 7px var(--nm-dark), inset -3px -3px 7px var(--nm-light);
}

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

  /* Dark mode is the harder case for neumorphism — human contrast
     sensitivity in low-luminance ranges is worse, so the delta has to be
     wider here than in light mode just to read the same. */
  --bg:        oklch(23% 0.014 150);
  --nm-dark:   oklch(10% 0.012 150);
  --nm-light:  oklch(36% 0.018 148);

  --ink:       oklch(95% 0.006 150);
  --ink-2:     oklch(78% 0.012 150);
  --ink-3:     oklch(66% 0.012 150);

  --accent:        oklch(74% 0.13 148);
  --accent-hover:  oklch(80% 0.12 148);
  --accent-ink:    oklch(19% 0.035 148);
  --accent-soft:   oklch(74% 0.13 148 / 0.18);
  --accent-ring:   oklch(74% 0.13 148 / 0.5);

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

  --hairline:  oklch(95% 0.018 150 / 0.09);
  --code-ink:  oklch(84% 0.045 148);

  --nm-raised:    7px 7px 18px var(--nm-dark), -7px -7px 18px var(--nm-light);
  --nm-raised-lg: 12px 12px 32px var(--nm-dark), -12px -12px 32px var(--nm-light);
  --nm-raised-sm: 4px 4px 10px var(--nm-dark), -4px -4px 10px var(--nm-light);
  --nm-inset:     inset 5px 5px 12px var(--nm-dark), inset -5px -5px 12px var(--nm-light);
  --nm-inset-sm:  inset 3px 3px 7px var(--nm-dark), inset -3px -3px 7px var(--nm-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: oklch(23% 0.014 150);
    --nm-dark: oklch(10% 0.012 150);
    --nm-light: oklch(36% 0.018 148);
    --ink: oklch(95% 0.006 150);
    --ink-2: oklch(78% 0.012 150);
    --ink-3: oklch(66% 0.012 150);
    --accent: oklch(74% 0.13 148);
    --accent-hover: oklch(80% 0.12 148);
    --accent-ink: oklch(19% 0.035 148);
    --accent-soft: oklch(74% 0.13 148 / 0.18);
    --accent-ring: oklch(74% 0.13 148 / 0.5);
    --danger: oklch(72% 0.16 25);
    --hairline: oklch(95% 0.018 150 / 0.09);
    --code-ink: oklch(84% 0.045 148);
    --nm-raised: 7px 7px 18px var(--nm-dark), -7px -7px 18px var(--nm-light);
    --nm-raised-lg: 12px 12px 32px var(--nm-dark), -12px -12px 32px var(--nm-light);
    --nm-raised-sm: 4px 4px 10px var(--nm-dark), -4px -4px 10px var(--nm-light);
    --nm-inset: inset 5px 5px 12px var(--nm-dark), inset -5px -5px 12px var(--nm-light);
    --nm-inset-sm: inset 3px 3px 7px var(--nm-dark), inset -3px -3px 7px 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;
  }
}