/* 
  SN Dark Tokens — "Power in silence"
  Design tone: quiet, confident, and respectful.
  Intended for card-based UIs with subtle motion and low-glare contrast.
*/
:root {
  color-scheme: dark;
  /* Colors */
  --bg:#0b0d10; --fg:#e6edf3; --muted:#9aa4af;
  --card:#11161b; --chip:#1a2330; --border:#1f2730; --shadow:rgba(0,0,0,0.4);
  --accent:#4fc1d9; --ok:#3bb174; --warn:#dba447; --err:#d65b5b;
  --bg-alt:#0a1015; --bg-accent:#10151a; --bg-highlight:#0b1520;
  --video-bg:#000; --capture-bg:#000;
  --video-fg:#e6edf3; --capture-fg:#e6edf3;
  --pill-bg:rgba(0,0,0,0.65); --pill-fg:#e6edf3;
  --ok-bg:rgba(34,197,94,0.15); --ok-border:rgba(34,197,94,0.35); --ok-text:#7cd9a3;
  --warn-bg:rgba(245,158,11,0.15); --warn-border:rgba(245,158,11,0.35); --warn-text:#e8c27c;
  --err-bg:rgba(239,68,68,0.15); --err-border:rgba(239,68,68,0.35); --err-text:#d99393;
  --drop-border:#222c37; --drop-bg:#0a1015; --drop-bg-drag:#0e1822;

  /* Typography */
  --font-sans:system-ui,'Segoe UI',Roboto,Ubuntu,sans-serif;
  --font-size-xs:12px; --font-size-sm:14px; --font-size-md:16px; --font-size-lg:20px;
  --font-weight-normal:400; --font-weight-semi:600; --font-weight-bold:650;
  --line-height:1.5;

  /* Spacing & Layout */
  --container-max-width:1200px; --container-padding:16px;
  --gap-sm:4px; --gap-md:8px; --gap-lg:12px; --gap-xl:14px; --gap-xxl:18px;
  --margin-sm:6px; --margin-md:8px; --margin-lg:12px;
  --padding-sm:8px; --padding-md:10px; --padding-lg:12px; --padding-xl:14px;

  /* Shape & Border */
  --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:14px; --radius-pill:999px;
  --border-width:1px; --border-style:solid; --drop-border-style:dashed;

  /* Shadows */
  --shadow-sm:0 4px 10px var(--shadow); --shadow-md:0 6px 18px var(--shadow);

  /* Motion */
  --transition-fast:150ms; --transition-normal:300ms;
  --transition-ease:cubic-bezier(0.4,0,0.2,1);
  --button-active-shift:1px; --hover-brightness:1.08;

  /* Component Primitives */
  --input-radius:var(--radius-md); --input-padding:10px 12px;
  --button-radius:var(--radius-lg); --button-padding:10px 14px;
  --card-radius:var(--radius-xl); --card-padding:var(--padding-lg);
  --badge-padding:4px 8px; --badge-min-width:120px;
  --chip-font-size:var(--font-size-xs); --chip-padding:2px 8px;
  --log-max-height:240px; --collapse-padding:8px 12px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f5f7fb; --fg:#1f2a38; --muted:#5a6a7d;
  --card:#ffffff; --chip:#e3e8f0; --border:#b9c4d4; --shadow:rgba(17,38,74,0.12);
  --bg-shell:#edf1f6;
  --accent:#2d8cf0; --ok:#2f9d60; --warn:#c48a1a; --err:#c14a4a;
  --bg-alt:#eef2f7; --bg-accent:#e7ecf3; --bg-highlight:#eef1f6;
  --video-bg:#dfe4ed; --capture-bg:#d8dee9;
  --video-fg:#1f2a38; --capture-fg:#1f2a38;
  --pill-bg:rgba(255,255,255,0.85); --pill-fg:#1f2a38;
  --ok-bg:rgba(47,157,96,0.12); --ok-border:rgba(47,157,96,0.35); --ok-text:#1f6f44;
  --warn-bg:rgba(196,138,26,0.12); --warn-border:rgba(196,138,26,0.35); --warn-text:#8a6511;
  --err-bg:rgba(193,74,74,0.12); --err-border:rgba(193,74,74,0.35); --err-text:#8c2f2f;
  --drop-border:#cfd6e0; --drop-bg:#f5f7fb; --drop-bg-drag:#e7edf7;
}