/* Nukleo — design tokens */

:root {
  color-scheme: light;

  /* Color */
  --color-bg: #faf9f6;
  --color-bg-raised: #ffffff;
  --color-bg-sunken: color-mix(in srgb, var(--color-ink) 7%, var(--color-bg));
  --color-ink: #14140f;
  --color-ink-soft: rgba(20, 20, 15, 0.62);
  --color-ink-faint: rgba(20, 20, 15, 0.4);
  --color-line: rgba(20, 20, 15, 0.12);
  --color-line-strong: rgba(20, 20, 15, 0.2);
  --color-accent: #1b3358;
  --color-accent-ink: #0d1c33;
  --color-accent-soft: rgba(27, 51, 88, 0.1);
  --color-accent-fg: var(--color-bg);
  --color-amber: #d98a3d;
  --color-amber-ink: color-mix(in srgb, var(--color-amber) 75%, var(--color-ink));
  --color-blue: #3d6fd9;
  --color-pink: #d9457c;
  --color-yellow: #e3ff2e;
  --color-red: #e0392b;

  /* Type */
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-ui: "Inter", system-ui, sans-serif;

  --text-eyebrow: clamp(0.7rem, 0.66rem + 0.15vw, 0.78rem);
  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  --text-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --text-h2: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  --text-hero: clamp(2.6rem, 1.5rem + 5vw, 6.4rem);

  /* Space */
  --space-gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --space-section: clamp(4.5rem, 3.2rem + 5.5vw, 9rem);
  --space-stack: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-pill: 999px;

  /* Motion */
  --duration-fast: 160ms;
  --duration-normal: 420ms;
  --duration-slow: 900ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}