/* ==========================================================================
   VAUHTI — Design tokens
   Single source of truth. Everything below is mirrored as CSS custom
   properties so it can be consumed directly by web, React Native or SwiftUI.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------ */
  --brand-900: #003D34;
  --brand-800: #005A4C;
  --brand-700: #007A66; /* text-safe on white (4.9:1) */
  --brand-600: #00A38D; /* borders, icons */
  --brand-500: #00C2A8; /* primary accent / fills */
  --brand-300: #7FE3D2;
  --brand-200: #B5F1E7;
  --brand-100: #D8F7F1;
  --brand-50:  #EDFBF8;

  /* ---- Ink (neutrals) --------------------------------------- */
  --ink-950: #060A13;
  --ink-900: #0A1020;
  --ink-800: #121B2E;
  --ink-700: #1E2A40;
  --ink-600: #33415C;
  --ink-500: #4E5C76;
  --ink-400: #6B7891;
  --ink-300: #98A3B5;
  --ink-200: #C7CFDA;
  --ink-100: #E6EAF0;
  --ink-50:  #F4F6F8;

  /* ---- Support ---------------------------------------------- */
  --amber-600: #945500;
  --amber-500: #FFB020;
  --amber-200: #FFD98A;
  --amber-100: #FFF2D6;

  --danger-600: #B42429;
  --danger-500: #E5484D;
  --danger-100: #FDE8E8;

  --success-600: #0F7B4F;
  --success-500: #17A56B;
  --success-100: #E3F7EC;

  --info-600: #1D4ED8;
  --info-100: #E6EDFF;

  /* ---- Semantic surface ------------------------------------- */
  --color-bg: var(--ink-50);
  --color-surface: #FFFFFF;
  --color-surface-alt: var(--ink-50);
  --color-line: var(--ink-100);
  --color-line-strong: var(--ink-200);
  --color-text: var(--ink-900);
  --color-text-secondary: var(--ink-500);
  --color-text-tertiary: var(--ink-400);
  --color-on-dark: #FFFFFF;
  --color-focus: var(--brand-600);

  /* ---- Radii ------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---- Elevation -------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(10, 16, 32, .06), 0 1px 3px rgba(10, 16, 32, .04);
  --shadow-2: 0 4px 14px rgba(10, 16, 32, .08);
  --shadow-3: 0 12px 32px rgba(10, 16, 32, .12);
  --shadow-4: 0 28px 64px rgba(10, 16, 32, .20);
  --shadow-brand: 0 10px 28px rgba(0, 194, 168, .28);

  /* ---- Type ------------------------------------------------- */
  --font-display: "Familjen Grotesk", "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: 34px;   --lh-display: 38px;
  --text-h1: 26px;        --lh-h1: 32px;
  --text-h2: 20px;        --lh-h2: 26px;
  --text-h3: 17px;        --lh-h3: 24px;
  --text-body: 16px;      --lh-body: 24px;
  --text-sm: 14px;        --lh-sm: 20px;
  --text-caption: 12px;   --lh-caption: 16px;
  --text-micro: 11px;     --lh-micro: 14px;

  /* ---- Spacing (4pt base) ----------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Motion ----------------------------------------------- */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-entrance: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}