/*
 * NDS v3 Tokens
 * Naming scheme:
 * --nds-color-*
 * --nds-space-*
 * --nds-typo-*
 * --nds-radius-*
 * --nds-shadow-*
 */
:root {
  /* color */
  --nds-color-bg-canvas: oklch(0.97 0.01 78);
  --nds-color-bg-subtle: oklch(0.955 0.012 78);
  --nds-color-bg-surface: oklch(0.985 0.006 78);
  --nds-color-fg-primary: oklch(0.24 0.01 80);
  --nds-color-fg-secondary: oklch(0.42 0.015 82);
  --nds-color-fg-muted: oklch(0.52 0.014 82);
  --nds-color-border-hair: oklch(0.84 0.01 80 / 0.6);
  --nds-color-border-line: oklch(0.7 0.02 60 / 0.35);
  --nds-color-accent: oklch(0.64 0.13 48);
  --nds-color-accent-soft: oklch(0.9 0.04 48);
  --nds-color-inverse: #ffffff;
  --nds-color-motype-1: oklch(0.64 0.13 48);
  --nds-color-motype-2: oklch(0.62 0.11 122);
  --nds-color-motype-3: oklch(0.63 0.12 70);
  --nds-color-motype-4: oklch(0.58 0.11 28);
  --nds-color-motype-5: oklch(0.52 0.04 255);
  --nds-color-riasec-r: hsl(15 60% 55%);
  --nds-color-riasec-i: hsl(45 70% 50%);
  --nds-color-riasec-a: hsl(150 25% 55%);
  --nds-color-riasec-s: hsl(210 40% 55%);
  --nds-color-riasec-e: hsl(310 30% 45%);
  --nds-color-riasec-c: hsl(30 35% 55%);
  --nds-color-riasec-r-soft: hsl(15 60% 93%);
  --nds-color-riasec-i-soft: hsl(45 70% 93%);
  --nds-color-riasec-a-soft: hsl(150 25% 93%);
  --nds-color-riasec-s-soft: hsl(210 40% 93%);
  --nds-color-riasec-e-soft: hsl(310 30% 93%);
  --nds-color-riasec-c-soft: hsl(30 35% 93%);

  /* spacing */
  --nds-space-2xs: 4px;
  --nds-space-xs: 8px;
  --nds-space-sm: 12px;
  --nds-space-md: 16px;
  --nds-space-lg: 24px;
  --nds-space-xl: 32px;
  --nds-space-2xl: 40px;
  --nds-space-3xl: 56px;

  /* typography */
  --nds-typo-font-body: "Inter Tight", system-ui, sans-serif;
  --nds-typo-font-heading: "Unbounded", system-ui, sans-serif;
  --nds-typo-font-mono: "JetBrains Mono", monospace;
  --nds-typo-size-xs: 12px;
  --nds-typo-size-sm: 14px;
  --nds-typo-size-md: 16px;
  --nds-typo-size-lg: 18px;
  --nds-typo-size-xl: 22px;
  --nds-typo-size-2xl: clamp(30px, 4.2vw, 50px);
  --nds-typo-size-display: clamp(34px, 8.2vw, 122px);
  --nds-typo-line-tight: 1.15;
  --nds-typo-line-base: 1.45;
  --nds-typo-line-relaxed: 1.6;
  --nds-typo-weight-button: 500;
  --nds-typo-track-tight: -0.02em;
  --nds-typo-track-display: -0.04em;
  --nds-typo-track-mono: 0.08em;
  --nds-typo-track-button: 0.015em;

  /* radius */
  --nds-radius-xs: 8px;
  --nds-radius-sm: 12px;
  --nds-radius-md: 16px;
  --nds-radius-lg: 22px;
  --nds-radius-button: 12px;
  --nds-radius-pill: 999px;

  /* shadows */
  --nds-shadow-sm: 0 8px 24px oklch(0.2 0.01 80 / 0.08);
  --nds-shadow-md: 0 12px 30px oklch(0.2 0.01 80 / 0.14);
  --nds-shadow-lg: 0 16px 40px oklch(0.2 0.01 80 / 0.2);
}