/*
 * 100 Tasks AI — Core design tokens
 * Shared by every video. Theme files (theme-light.css / theme-dark.css)
 * override --bg-*, --text-*, and --surface-* on top of these.
 */

:root {
  /* ---- Brand color ---------------------------------------------------- */
  --color-brand: #e8513a;          /* primary CTA / accent */
  --color-brand-hover: #d94530;    /* darker variant for interactive states */
  --color-brand-light: #f2705c;    /* lighter tint for hover/glow */
  --color-brand-logo: #c0392b;     /* logo mark only */
  --color-brand-light1: #fde7e2;   /* warm-peach active-state bg (matches app --brand-light1) */
  --color-brand-light2: #fef5f2;   /* faint warm tint for highlighted rows / sections */

  /* ---- Stage colors --------------------------------------------------- */
  /* SETUP (tasks 1–43) — confident slate-blue, "blueprint / foundation" feel.
     LAUNCH (44–67) — reuses brand orange; LAUNCH is the go-live energy.
     SCALE (68–100) — emerald, "growth / money" feel.
     Each stage has a strong + light variant + on-stage text color.
     Use these to color the task number chip, cockpit dot, and any per-stage accent. */
  --color-stage-setup: #2563eb;          /* vibrant cobalt — "blueprint" */
  --color-stage-setup-light: #dbe6fa;
  --color-stage-setup-on: #ffffff;

  --color-stage-launch: var(--color-brand);
  --color-stage-launch-light: var(--color-brand-light1);
  --color-stage-launch-on: var(--text-on-brand, #ffffff);

  --color-stage-scale: #0d9a64;          /* vibrant emerald — "growth" */
  --color-stage-scale-light: #d6f1e3;
  --color-stage-scale-on: #ffffff;

  /* ---- Semantic ------------------------------------------------------- */
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Montserrat", -apple-system, "SF Pro Display", sans-serif;
  --font-body: "Montserrat", -apple-system, "SF Pro Text", sans-serif;

  /* Type scale — calibrated for 1920x1080 video, not web */
  --text-hero: 200px;       /* big screen-filling title */
  --text-headline: 120px;   /* primary headline */
  --text-title: 72px;       /* scene title */
  --text-subtitle: 42px;    /* supporting copy */
  --text-body: 28px;        /* paragraph body */
  --text-label: 22px;       /* eyebrow / kicker label (often uppercase + letter-spaced) */
  --text-meta: 18px;        /* fine print / timestamps */

  /* Letter-spacing presets */
  --tracking-tight: -3px;   /* big display */
  --tracking-normal: -1px;
  --tracking-loose: 4px;    /* labels, kickers (uppercase) */

  /* Font weights (matches the 5 weights loaded in fonts.css) */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Radius --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Spacing scale (4px base, video-scale) ------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 160px;          /* safe-area padding for 1920x1080 */

  /* ---- Motion --------------------------------------------------------- */
  /* GSAP eases — use these strings literally in tweens */
  --ease-pop: "back.out(1.7)";
  --ease-snap: "expo.out";
  --ease-smooth: "power3.out";
  --ease-glide: "sine.inOut";
  --ease-bouncy: "back.out(2.2)";

  --duration-quick: 0.4;     /* seconds */
  --duration-base: 0.6;
  --duration-slow: 1.0;
  --duration-hero: 1.6;
}