/* ════════════════════════════════════════════════════════════════════════
   OmniChrome — shared design tokens (single source of truth)

   Served at https://omnichrome.net/static/omnichrome-tokens.css (nginx aliases
   /static/ → /root/OmniClipper/static/; Flask serves the same path in local dev).
   Linked by all three apps:
     - OmniClipper  dashboard.html
     - OmniManager  public/index.html   (keeps a local :root fallback for dev)
     - OmniCut      public/index.html   (keeps a local :root fallback for dev)
   Change a value here and every app picks it up. Canonical superset extracted
   from OmniClipper's dashboard.html :root (2026-07-11); matches the design
   handoff (OmniChrome Design System / tokens/*.css).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* brand */
  --brand-magenta: #ff2db7;
  --brand-blue: #2e93f0;
  --brand-gradient: linear-gradient(95deg, #ff2db7 0%, #2e93f0 100%);
  --brand-gradient-45: linear-gradient(45deg, #ff2db7 0%, #2e93f0 100%);
  --brand-gradient-subtle: linear-gradient(95deg, rgba(255,45,183,0.15) 0%, rgba(46,147,240,0.15) 100%);
  /* accent (electric blue) */
  --accent: #3aa0ff;
  --accent-hover: #5fb3ff;
  --accent-active: #2384ec;
  --accent-subtle: rgba(58,160,255,0.14);
  --accent-border: rgba(58,160,255,0.45);
  --accent-bright: #6fc0ff;
  /* magenta */
  --magenta: #ff2db7;
  --magenta-hover: #e81fa3;
  --magenta-subtle: rgba(255,45,183,0.12);
  --magenta-border: rgba(255,45,183,0.35);
  /* semantic */
  --green: #00e08a; --green-subtle: rgba(0,224,138,0.16);
  --red: #ff3355; --red-subtle: rgba(255,51,85,0.16);
  --amber: #ffb020; --amber-subtle: rgba(255,176,32,0.16);
  /* dark immersive surfaces (only theme) */
  --bg: #06081a; --bg-2: #090d24;
  --surface: #0e1430; --surface-2: #161e44; --surface-3: #212e63;
  --border: #2b3a6e; --border-subtle: #1a2347;
  --text: #eef1fb; --text-2: #c2c9e6; --muted: #8089b0; --muted-2: #565d85;
  /* glass */
  --glass: rgba(22,30,68,0.55); --glass-strong: rgba(22,30,68,0.82);
  --glass-border: rgba(130,165,255,0.22); --glass-blur: blur(16px);
  /* immersive backdrops */
  --bg-immersive: radial-gradient(circle at 18% -10%, rgba(58,160,255,0.16), transparent 45%), radial-gradient(circle at 95% 110%, rgba(255,45,183,0.14), transparent 50%), #06081a;
  --bg-grid: linear-gradient(rgba(130,165,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(130,165,255,0.04) 1px, transparent 1px);
  /* glow */
  --glow-blue: 0 0 28px rgba(58,160,255,0.5);
  --glow-magenta: 0 0 28px rgba(255,45,183,0.5);
  --glow-accent: 0 0 52px rgba(58,160,255,0.3);
  --glow-inset: inset 0 0 0 1px rgba(130,165,255,0.12);
  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:28px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --radius-xs:4px; --radius-sm:10px; --radius:14px; --radius-lg:20px; --radius-xl:28px; --radius-full:9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 4px 12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.35);
  --z-base:0; --z-raised:10; --z-overlay:100; --z-modal:200; --z-toast:300; --z-top:400;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 120ms; --duration: 200ms; --duration-slow: 340ms; --duration-xslow: 500ms;
  /* fonts */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, sans-serif;
  --font-ui: var(--font);
  --font-brand: "Josefin Sans", var(--font);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --mono: var(--font-mono);

  /* ── legacy aliases — every old variable name used by the apps stays
     resolvable, so existing component CSS keeps working untouched.
     New/touched code should prefer the canonical names above. ── */
  --accent-soft: var(--accent-subtle);
  --logo-grad: var(--brand-gradient);
  --inset: var(--bg-2);
  --border-strong: var(--glass-border);
  --text-soft: var(--text-2);
  --log-bg: var(--bg);
  --log-text: var(--text-2);
  --title-grad: var(--brand-gradient);
  --drawer-bg: var(--surface);
  --bg-grad: var(--bg-immersive);
  --blue: var(--accent);
}