/*
 * 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.
 *
 * Ad scenes (1080x1920) take their geometry from the Scene Design Contract
 * section below. The written contract lives in
 * skills/video-creation/references/brand-system.md.
 */

:root {
  /* ---- Brand color ---------------------------------------------------- */
  --color-brand: #e8513a;          /* primary CTA / accent */
  --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;

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

  /* Legacy product-video type tokens. Ad scenes size type via the Scene
     Design Contract below; product videos under public/videos/product/
     still consume these. */
  --text-subtitle: 42px;

  /* Legacy tracking tokens (product videos + one legacy ad). Ad scenes use
     letter-spacing: 0 on every text tier. */
  --tracking-tight: -3px;
  --tracking-normal: -1px;
  --tracking-loose: 4px;

  /* Font weights. Video text uses 400/500 only — 600/700 are banned on
     brand surfaces (posters/product UI keep their own rules). */
  --weight-regular: 400;
  --weight-medium: 500;

  /* ---- Radius --------------------------------------------------------- */
  --radius-card: 5px;       /* canonical surface radius for cards/panels/tiles */
  --radius-media: 8px;      /* poster/media frames and large scene panels */
  --radius-chip: 2px;       /* caption bars, small chips */
  --radius-pill: 999px;

  /* ---- Scene Design Contract (ad scenes, 1080x1920 portrait) ---------- */
  /* Safe areas: captions/PiP own the bottom band; platform UI owns the top. */
  --scene-safe-top: 270px;
  --scene-safe-bottom: 450px;
  --scene-safe-side: 50px;

  /* Title slot — heading-family scenes (graphic scenes with a top title).
     Scenes that intentionally differ override these on their scene root. */
  --scene-title-size: 58px;
  --scene-title-top: 270px;
  --scene-title-line-height: 0.98;

  /* Title slot — poster/product-family scenes (small centered title above
     an embedded artifact). */
  --scene-poster-title-size: 36px;
  --scene-poster-title-top: 438px;
  --scene-poster-title-line-height: 1.08;

  /* Title slot — full-frame statement scenes (text-statement family). */
  --scene-statement-title-size: 72px;

  --scene-subtitle-size: 25px;

  /* Canonical background wash — soft vertical brand tint on the flat page.
     Apply via `background:`. --scene-wash-deep is the stronger two-tint
     variant used by route/flow scenes. */
  --scene-wash:
    linear-gradient(
      180deg,
      var(--bg-flat) 0%,
      color-mix(in oklab, var(--color-brand-light) 4%, var(--bg-flat)) 50%,
      var(--bg-flat) 100%
    );
  --scene-wash-deep:
    linear-gradient(
      180deg,
      var(--bg-flat) 0%,
      color-mix(in oklab, var(--color-brand-light) 4%, var(--bg-flat)) 46%,
      color-mix(in oklab, var(--color-brand) 2%, var(--bg-flat)) 74%,
      var(--bg-flat) 100%
    );

  /* Canonical working-area grid texture (matches the vui split-panel grid). */
  --scene-grid-size: 54px;
  --scene-grid-line: color-mix(in oklab, var(--text-primary) 5%, transparent);
  --scene-grid-mask: linear-gradient(180deg, transparent 0%, black 12%, black 86%, transparent 100%);
}