/* ============================================================
   AirTracer — Design Tokens
   Source style: "Hatch" (hand-drawn zine / pastel candy).
   Typefaces substituted with free Google fonts:
     Recoleta → Gotu (display / headlines)
     Lota Grotesque → DM Sans (body / UI)
   Never hardcode hex — always use these custom properties.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Gorditas:wght@400;700&family=DM+Sans:opsz,wght@9..40,100;9..40,400;9..40,500;9..40,700&display=swap');

:root {
  /* ---- Colors ---- */
  --color-cream-paper: #f5f4f0;   /* page canvas */
  --color-pure-white: #ffffff;    /* card & button surfaces */
  --color-ink-black: #000000;     /* text, hairline borders, strokes */
  --color-charcoal: #222222;      /* softer body text */
  --color-slate: #333333;         /* nav / subdued labels */
  --color-fog: #dddfe2;           /* muted dividers / underlines */
  --color-mint-splash: #99ffcc;   /* THE action color + highlight swash */
  --color-plum-ink: #160042;      /* deep accent, dark-surface text */
  --color-aubergine: #26153f;     /* deep outline variant */
  --color-sky-pop: #7bbbff;       /* decorative (confetti / strokes) */
  --color-bubblegum: #ff99cc;     /* decorative */
  --color-peach-pop: #ffcc99;     /* decorative */

  /* ---- Fonts ---- */
  --font-display: 'Gorditas', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Compatibility aliases with the design doc's names */
  --font-recoleta: var(--font-display);
  --font-lota-grotes-que-alt: var(--font-body);

  /* ---- Type scale ---- */
  --text-caption: 14px;    --leading-caption: 1.5;
  --text-body: 18px;       --leading-body: 1.5;
  --text-subheading: 24px; --leading-subheading: 1.3;
  --text-heading-sm: 32px; --leading-heading-sm: 1.2;  --tracking-heading-sm: -0.6px;
  --text-heading: 48px;    --leading-heading: 1.1;      --tracking-heading: -1px;
  --text-heading-lg: 64px; --leading-heading-lg: 1.1;   --tracking-heading-lg: -1.4px;
  --text-display: 84px;    --leading-display: 1.05;      --tracking-display: -1.8px;
  --text-hero: 151px;      --leading-hero: 1;            --tracking-hero: -3px;

  /* ---- Weights ---- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ---- Spacing (4px base) ---- */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px;
  --spacing-40: 40px; --spacing-48: 48px; --spacing-52: 52px; --spacing-64: 64px;
  --spacing-80: 80px; --spacing-100: 100px; --spacing-120: 120px; --spacing-172: 172px;

  /* ---- Layout ---- */
  --page-max-width: 1200px;
  --section-gap: 96px;
  --card-padding: 32px;
  --element-gap: 24px;

  /* ---- Border radius ---- */
  --radius-small: 4px;
  --radius-buttons: 8px;
  --radius-cards: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 32px;
  --radius-large: 40px;
  --radius-tags: 100px;
  --radius-pills: 9999px;

  /* ---- Structural line + hard offset shadow (per updated Figma) ---- */
  --line: 1px solid var(--color-ink-black);
  --line-2: 2px solid var(--color-ink-black);
  --shadow-hard: 0px 2px 0px 0px var(--color-ink-black);
  --shadow-hard-lg: 0px 4px 0px 0px var(--color-ink-black);

  /* ---- Surfaces ---- */
  --surface-canvas: var(--color-cream-paper);
  --surface-card: var(--color-pure-white);
  --surface-mint-action: var(--color-mint-splash);

  /* ============================================================
     AirTracer app-specific tokens (built on the Hatch palette).
     The canvas/JS layers read THESE names.
     ============================================================ */
  --ink-trail: var(--color-mint-splash);      /* the fingertip "pen" */
  --ink-trail-edge: var(--color-ink-black);   /* black halo around the pen */
  --letter-outline: var(--color-ink-black);   /* translucent target letter */
  --letter-fill-progress: var(--color-mint-splash);
  --letter-fill-done: var(--color-mint-splash);
  --panel: rgba(255, 255, 255, 0.94);         /* white card panels over video */
  --scrim: rgba(22, 0, 66, 0.45);             /* plum scrim over video */

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}