/*
 * Ku-saga Design System — tokens
 * Layer 1: primitives (raw palette and scales). Do not use these in app CSS.
 * Layer 2: semantic tokens (what a value is for). App and component CSS use only these.
 * Full reference: docs/design-system/README.md · Live preview: /design-system
 */
:root{
  color-scheme:dark;

  /* ── Primitives: color ─────────────────────────────── */
  --ks-navy-1000:#060b15;
  --ks-navy-950:#0a111c;
  --ks-navy-900:#0d131f;
  --ks-navy-850:#101a29;
  --ks-navy-800:#131d2d;
  --ks-navy-750:#172232;
  --ks-navy-700:#1b2738;
  --ks-navy-650:#202c3e;
  --ks-navy-600:#27384d;
  --ks-navy-550:#344a65;
  --ks-navy-500:#38495e;
  --ks-navy-400:#506783;
  --ks-navy-300:#7890ad;
  --ks-navy-200:#aebcd0;
  --ks-navy-100:#cad5e4;
  --ks-navy-50:#f7f9ff;

  --ks-red-300:#ff6d85;
  --ks-red-400:#ff476a;
  --ks-red-500:#ff0332;
  --ks-red-950:#3b1b30;

  --ks-yellow-200:#ffe16b;
  --ks-yellow-300:#ffeb5c;
  --ks-yellow-500:#fcd903;
  --ks-yellow-800:#8b7930;
  --ks-yellow-950:#3a3340;

  --ks-blue-300:#79ceff;
  --ks-blue-400:#39b8ff;
  --ks-blue-500:#00a5fe;
  --ks-blue-700:#27658d;
  --ks-blue-850:#223c59;
  --ks-blue-900:#1b3551;

  --ks-ink:#111522;
  --ks-white:#ffffff;

  /* ── Semantic: surfaces ───────────────────────────── */
  --color-bg:var(--ks-navy-900);
  --color-surface-sunken:var(--ks-navy-850);   /* inputs, wells, drop zones */
  --color-surface:var(--ks-navy-800);          /* list items, nav track */
  --color-surface-raised:var(--ks-navy-700);   /* rows, badges */
  --color-surface-hover:var(--ks-navy-600);
  --color-surface-pressed:var(--ks-navy-550);
  --color-surface-selected:#28344a;
  --color-surface-media:var(--ks-navy-1000);   /* behind video and canvas */
  --gradient-panel:linear-gradient(145deg,var(--ks-navy-650),#151e2d);
  --gradient-page:
    radial-gradient(ellipse 850px 500px at 90% -15%,#153c62 0%,transparent 70%),
    radial-gradient(ellipse 500px 600px at -15% 65%,#301525 0%,transparent 75%),
    var(--color-bg);

  /* ── Semantic: borders ────────────────────────────── */
  --color-border:var(--ks-navy-500);
  --color-border-strong:var(--ks-navy-400);    /* form controls, dashed zones */
  --color-border-media:#33445b;

  /* ── Semantic: text ───────────────────────────────── */
  --color-text:var(--ks-navy-50);
  --color-text-soft:var(--ks-navy-100);        /* lead paragraphs */
  --color-text-muted:var(--ks-navy-200);
  --color-text-placeholder:var(--ks-navy-300);
  --color-text-info:var(--ks-blue-300);        /* time codes, paths, counts */
  --color-text-on-accent:var(--ks-ink);

  /* ── Semantic: brand and state ────────────────────── */
  --color-brand-red:var(--ks-red-500);
  --color-brand-yellow:var(--ks-yellow-500);
  --color-brand-blue:var(--ks-blue-500);
  --color-accent:var(--color-brand-yellow);
  --color-accent-hover:var(--ks-yellow-300);
  --color-accent-border:var(--ks-yellow-800);
  --color-focus:var(--color-brand-blue);
  --color-info-surface:var(--ks-blue-850);
  --color-info-surface-strong:var(--ks-blue-900);
  --color-info-border:var(--ks-blue-700);
  --color-warning:var(--ks-yellow-200);
  --color-warning-surface:var(--ks-yellow-950);
  --color-warning-border:#6b5b61;
  --color-danger:var(--ks-red-300);
  --color-danger-surface:var(--ks-red-950);
  --color-danger-strong:#ff3b61;

  /* Crop-region identities (Shorts studio). Order matches the logo: yellow, red, blue. */
  --color-region-clock:var(--ks-yellow-500);
  --color-region-left:var(--ks-red-400);
  --color-region-right:var(--ks-blue-400);
  --color-overlay-fill:#ffffff12;
  --color-overlay-fill-active:#ffffff26;
  --color-overlay-label:#0d131fee;
  --color-focus-inverse:var(--ks-white);

  --gradient-brand:linear-gradient(90deg,var(--color-brand-red),var(--color-brand-yellow),var(--color-brand-blue));
  --gradient-brand-stripe:linear-gradient(90deg,var(--color-brand-red) 0 34%,var(--color-brand-yellow) 34% 67%,var(--color-brand-blue) 67% 100%);
  --gradient-brand-underline:linear-gradient(90deg,var(--color-brand-red) 0 40%,var(--color-brand-yellow) 40% 70%,var(--color-brand-blue) 70%);

  /* ── Typography ───────────────────────────────────── */
  --font-sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;

  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:13px;
  --text-md:14px;
  --text-base:16px;
  --text-lg:18px;
  --text-xl:20px;
  --text-2xl:24px;
  --text-3xl:28px;
  --text-display:clamp(42px,6.2vw,76px);

  --weight-regular:400;
  --weight-semibold:700;
  --weight-bold:800;
  --weight-black:900;

  --leading-heading:1.15;
  --leading-body:1.5;

  --tracking-display:-.06em;
  --tracking-heading:-.03em;
  --tracking-wide:.08em;
  --tracking-eyebrow:.16em;

  /* ── Spacing (4px grid) ───────────────────────────── */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-14:56px;
  --space-16:64px;

  /* ── Radius ───────────────────────────────────────── */
  --radius-xs:4px;   /* crop boxes */
  --radius-sm:8px;   /* controls, inputs, small buttons, notices */
  --radius-md:10px;  /* buttons, rows, media, nav */
  --radius-lg:12px;  /* drop zones, icon tiles, brand mark */
  --radius-xl:18px;  /* panels */
  --radius-pill:999px;

  /* ── Elevation ────────────────────────────────────── */
  --shadow-panel:0 20px 44px #05090d40;
  --shadow-media:0 14px 32px #0008;
  --shadow-overlay:0 0 0 1px #0009,0 2px 12px #0009;
  --shadow-overlay-active:0 0 0 2px #fff8,0 4px 16px #000b;

  /* ── Focus ────────────────────────────────────────── */
  --focus-ring:3px solid var(--color-focus);
  --focus-offset:3px;

  /* ── Motion ───────────────────────────────────────── */
  --duration-fast:.15s;
  --duration-base:.2s;
  --ease-standard:ease;

  /* ── Layout ───────────────────────────────────────── */
  --layout-max:1240px;
  --layout-gutter:40px;
  --layout-gutter-mobile:24px;
  --sidebar-width:270px;
  --control-height-sm:32px;
  --control-height-md:42px;
}