/* Design tokens — taken from the design system export, extended with values
   that only appeared hardcoded there (night/mint/alpha steps). */

:root {
  /* Colors */
  --ink-900: #141918;
  --ink-700: #3C4442;
  --ink-500: #69736F;
  --ink-300: #A3ACA9;
  --ink-100: #E2E8E6;

  --paper: #F7FAF9;
  --paper-warm: #EDF2F1;
  --white: #FFFFFF;

  --petrol-700: #2C4F4C;
  --petrol-600: #355E5A;
  --petrol-500: #3E6D6A;
  --petrol-200: #BFD4D1;
  --petrol-100: #DCE9E7;
  --petrol-50: #EEF4F3;

  --sage-600: #567553;
  --sage-100: #E7ECE6;
  --amber-500: #C29435;
  --amber-100: #F4ECDA;
  --red-600: #B04338;
  --red-100: #F4E0DE;

  /* Dark surfaces + accents on dark ground (hardcoded in the export) */
  --night-900: #14201F;
  --mint-400: #7FB5AF;
  --mint-200: #CFE3E0;

  --white-a05: rgba(255, 255, 255, .05);
  --white-a08: rgba(255, 255, 255, .08);
  --white-a12: rgba(255, 255, 255, .12);
  --white-a14: rgba(255, 255, 255, .14);
  --white-a16: rgba(255, 255, 255, .16);
  --white-a18: rgba(255, 255, 255, .18);
  --white-a35: rgba(255, 255, 255, .35);
  --white-a72: rgba(255, 255, 255, .72);
  --white-a78: rgba(255, 255, 255, .78);

  --mint-a14: rgba(127, 181, 175, .14);
  --mint-a16: rgba(127, 181, 175, .16);
  --mint-a35: rgba(127, 181, 175, .35);
  --petrol-a28: rgba(62, 109, 106, .28);
  --night-a72: rgba(20, 32, 31, .72);
  --night-a92: rgba(20, 32, 31, .92);

  /* Semantic aliases */
  --accent: var(--petrol-500);
  --accent-hover: var(--petrol-600);
  --accent-press: var(--petrol-700);
  --accent-soft: var(--petrol-100);
  --accent-softer: var(--petrol-50);

  --text-body: var(--ink-700);
  --text-heading: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-on-accent: #FFFFFF;
  --text-link: var(--petrol-600);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-warm: var(--paper-warm);
  --surface-inverse: #1C2B2A;

  --border-soft: var(--ink-100);
  --border-strong: var(--ink-300);

  --success: var(--sage-600);
  --success-soft: var(--sage-100);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-100);
  --error: var(--red-600);
  --error-soft: var(--red-100);

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;

  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 46px;
  --text-hero: 62px;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  --weight-body: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-display: 700;
  --weight-heavy: 800;

  --tracking-display: -0.02em;
  --tracking-caps: 0.08em;

  /* Layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* The export token said 1120px but every page overrode it to 1280px —
     using the real value directly. */
  --container-max: 1280px;
  --container-pad: 24px;

  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-pill: 8px;

  --shadow-card: 0 2px 10px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, .10), 0 3px 8px rgba(0, 0, 0, .06);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, .16);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .15s;
  --dur-med: .3s;

  --nav-height: 72px;
}

/* Mobile type scaling: centralized via token overrides */
@media (max-width: 1024px) {
  :root {
    --text-hero: 52px;
    --text-3xl: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --text-hero: 42px;
    --text-3xl: 34px;
    --text-2xl: 28px;
    --text-xl: 22px;
    --space-9: 64px;
    --space-8: 48px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-hero: 34px;
    --text-3xl: 30px;
    --container-pad: 16px;
  }
}