/* ============================================================
   DESIGN TOKENS — fill these in from your Figma design system
   ============================================================ */

:root {

  /* --- Colors --- */
  --color-bg:             #F8F4F4;
  --color-surface:        #F8F4F4;
  --color-border:         #CFCFCF;
  --color-text-primary:   #081F49;
  --color-text-secondary: #081F49;
  --color-accent:         #081F49;
  --color-accent-hover:   #081F49;
  --color-overlay:        rgba(8, 31, 73, 0.6);
  --color-white:          #ffffff;
  --color-black:          #000000;

  /* --- Typography --- */
  --font-sans:  'Archivo', system-ui, -apple-system, sans-serif;
  --font-serif: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:  ui-monospace, 'Cascadia Code', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.5rem;     /* 56px */
  --text-5xl:   5rem;       /* 80px */

  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-body:     1.4;    /* body copy  — 140% */
  --leading-label:    1.2;    /* labels     — 120% */
  --leading-loose:    1.7;

  --tracking-headline: -0.06em;   /* Baton Turbo headlines */
  --tracking-label:    -0.04em;   /* section labels */
  --tracking-body:      0em;      /* body copy */
  --tracking-tight:    -0.03em;
  --tracking-normal:    0;
  --tracking-wide:      0.08em;
  --tracking-wider:     0.15em;

  /* --- Spacing (8px base grid) --- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* --- Layout --- */
  --container-max:  1280px;
  --container-pad:  var(--space-6);   /* default horizontal gutter */

  /* --- Borders --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  ;
  --shadow-md:  ;
  --shadow-lg:  ;

  /* --- Z-index layers --- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-slider:   200;   /* Play page slider overlays */
  --z-modal:    300;   /* password gate */
  --z-nav:      400;
  --z-toast:    500;

  /* --- Motion --- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  200ms;
  --duration-base:  400ms;
  --duration-slow:  700ms;
  --duration-crawl: 1200ms;
}