/* RudraCut design tokens. Every colour, size, radius, shadow and duration in style.css comes from here.
   Surfaces follow Premiere's panel colour at run time (js/ui.js syncHostTheme overrides --bg / --surface-* / --field). */
:root {
  /* ---- surfaces: 3 elevation levels on a Premiere-like background ---- */
  --bg: #1d1d1f;            /* panel background */
  --surface-0: #19191b;     /* wells, inset strips, segmented-control track */
  --surface-1: #242427;     /* cards */
  --surface-2: #2d2d31;     /* raised: popovers, active segment, menus */
  --surface-3: #37373c;     /* hover on raised */
  --field: #161618;         /* inputs */
  --scrim: rgba(8, 8, 10, .62);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --line-3: rgba(255, 255, 255, .22);
  --hover: rgba(255, 255, 255, .05);
  --press: rgba(255, 255, 255, .09);

  /* ---- text (all ≥ 4.5:1 on --surface-1) ---- */
  --text: #ededf0;
  --text-2: #b4b6c0;        /* secondary */
  --muted: #a3a5b0;
  --dim: #9598a3;
  --on-accent: #1f1203;     /* text on the saffron gradient */

  /* ---- brand: saffron / orange, used for the primary action and the active state only ---- */
  --accent: #ff8a1a;
  --accent-2: #ff5b1f;
  --accent-grad: linear-gradient(135deg, #ffad2e 0%, #ff8a1a 45%, #ff5b1f 100%);
  --accent-soft: rgba(255, 138, 26, .14);
  --accent-line: rgba(255, 138, 26, .55);
  --ring: 0 0 0 3px rgba(255, 138, 26, .28);

  /* ---- semantic ---- */
  --ok: #3ecf8e;    --ok-soft: rgba(62, 207, 142, .14);
  --warn: #f5b544;  --warn-soft: rgba(245, 181, 68, .14);
  --bad: #ff6262;   --bad-soft: rgba(255, 98, 98, .14);
  --info: #6b95ff;  --info-soft: rgba(107, 149, 255, .16);
  --key: #ffe14d;   --key-soft: rgba(255, 225, 77, .12);   /* key words (emphasis) */
  --ok-line: rgba(62, 207, 142, .45);   --ok-text: #8ae8b8;
  --warn-line: rgba(245, 181, 68, .4);  --warn-text: #ffd99a;
  --bad-line: rgba(255, 98, 98, .42);   --bad-text: #ffb1b1;
  --info-line: rgba(107, 149, 255, .6); --info-text: #c3d2ff;
  --key-line: rgba(255, 225, 77, .35);  --key-text: #ffe98a;  --key-strong: rgba(255, 225, 77, .22);
  --accent-text: #ffbf80;
  --styled: #b98aff;                    /* a word with its own style */
  --white: #ffffff;
  --video-bg: #000000;                  /* behind the preview / thumbnails */
  --thumb-bg: #1f262e;                  /* preset thumbnail backdrop (matches the canvas gradient) */
  --none-a: #222222; --none-b: #ff4444; /* "no colour" swatch */
  --sheen: rgba(255, 255, 255, .06);
  --mask: #000000;                      /* opaque part of fade-out masks (alpha only) */

  /* ---- type: 11 / 12 / 13 / 15 / 18 / 22, two weights ---- */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Nirmala UI", "Noto Sans Devanagari", "Noto Sans Gujarati", sans-serif;
  --font-indic: "Nirmala UI", "Noto Sans Devanagari", "Noto Sans Gujarati", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --fs-1: 11px; --fs-2: 12px; --fs-3: 13px; --fs-4: 15px; --fs-5: 18px; --fs-6: 22px;
  --fw: 400; --fw-b: 600;
  --lh: 1.45;

  /* ---- 4 px grid ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --pad: var(--sp-3);       /* page gutter (8 on narrow docks, 16 on wide) */
  --gap: var(--sp-3);       /* between cards */
  --hit: 32px;              /* minimum hit target */
  --hit-sm: 28px;           /* dense rows (caption list, inspector) */

  /* ---- radii ---- */
  --r-ctl: 6px; --r-card: 10px; --r-pill: 999px;

  /* ---- depth ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .38);
  --shadow-pop: 0 16px 44px rgba(0, 0, 0, .55), 0 0 0 1px var(--line-2);
  --shadow-accent: 0 6px 18px rgba(255, 110, 26, .28);
  --knob-ring: rgba(0, 0, 0, .25);
  --shadow-bar: 0 6px 12px -10px rgba(0, 0, 0, .7);

  /* ---- motion ---- */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 280ms;
  --ease-enter: cubic-bezier(.2, .8, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --press-scale: .97;

  /* ---- layout ---- */
  --stick: 0px;             /* height of the sticky tab bar (set by ui.js) */
  --z-sticky: 20; --z-pop: 40; --z-modal: 60; --z-toast: 70;
}
@media (max-width: 380px) { :root { --pad: var(--sp-2); --gap: var(--sp-2); } }
@media (min-width: 760px) { :root { --pad: var(--sp-4); } }

/* reduced motion: system setting or the panel's own "Reduce motion" switch */
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --press-scale: 1; } }
body.reduce-motion { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --press-scale: 1; }