/* ============================================================
   SKILL ITBD Tracker — design tokens
   Taken from tools.skillitbd.com (Tailwind gray scale + SKILL ITBD cyan
   and crimson). Dark is the default; light is opt-in through the theme
   toggle, which sets <html data-theme="light">.
   Every color the UI uses lives here, so restyling means editing this file.
   ============================================================ */

:root {
  /* Fonts */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Brand (same in both themes) */
  --brand: #30c0e3;           /* SKILL ITBD cyan: toggles, slider fill, accents */
  --brand-hover: #2aa8c7;
  --brand-ink: #2ca2c1;       /* "SKILL" in the wordmark, section headings */
  --brand-500: #06b6d4;       /* top-bar buttons */
  --brand-600: #0891b2;       /* primary buttons */
  --brand-700: #0e7490;       /* active tile, pressed */
  --brand-300: #67e8f9;       /* icons on dark */
  --crimson: #c93a5d;         /* "ITBD" in the wordmark, gradient end */
  --brand-gradient: linear-gradient(135deg, #30c0e3 0%, #c93a5d 100%);
  --glow-cyan: rgba(48, 192, 227, 0.35);
  --glow-crimson: rgba(201, 58, 93, 0.35);

  /* Status */
  --danger: #ef4444;
  --danger-strong: #dc2626;
  --success: #4ade80;
  --warning: #facc15;
  --info: #60a5fa;

  /* Asset types (chips, content mix, dots) */
  --c-all: #30c0e3;
  --c-photo: #60a5fa;
  --c-illustration: #c084fc;
  --c-vector: #f97316;
  --c-video: #f43f5e;
  --c-other: #9ca3af;

  /* Shape */
  --radius-sm: 4px;
  --radius-btn: 6px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --topbar-h: 49px;
  --sidebar-w: 320px;

  /* ── Dark theme (default) ── */
  color-scheme: dark;
  --bg: #030712;              /* page (gray-950) */
  --surface: #1f2937;         /* top bar, sidebar, cards (gray-800) */
  --surface-soft: rgba(31, 41, 55, 0.5);
  --surface-2: #374151;       /* hover, slider track (gray-700) */
  --surface-3: rgba(75, 85, 99, 0.5);  /* icon circle (gray-600/50) */
  --panel: #171a1f;           /* hero card, asset cards */
  --input: #111827;           /* inputs (gray-900) */
  --border: #374151;
  --border-soft: rgba(55, 65, 81, 0.6);
  --text: #f9fafb;
  --text-2: #d1d5db;
  --text-3: #9ca3af;
  --text-on-brand: #ffffff;
  --icon-accent: var(--brand-300);
  --heading-accent: var(--brand-ink);
  --tile-active-bg: var(--brand-700);
  --tile-active-border: var(--brand-500);
  --danger-soft: rgba(239, 68, 68, 0.12);
  --success-soft: rgba(74, 222, 128, 0.12);
  --warning-soft: rgba(250, 204, 21, 0.12);
  --brand-soft: rgba(48, 192, 227, 0.12);
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
  --scrim: rgba(3, 7, 18, 0.7);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f8fa;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.7);
  --surface-2: #e5eef1;
  --surface-3: #e0f2f6;
  --panel: #ffffff;
  --input: #f7fbfc;
  --border: #d5e6ea;
  --border-soft: rgba(213, 230, 234, 0.8);
  --text: #030712;
  --text-2: #374151;
  --text-3: #5f7a80;
  --icon-accent: var(--brand-600);
  --heading-accent: var(--brand-600);
  --tile-active-bg: var(--brand-600);
  --tile-active-border: var(--brand-700);
  --danger-soft: #fdecec;
  --success-soft: #e8f9ee;
  --warning-soft: #fdf6d8;
  --brand-soft: #e3f6fb;
  --shadow: 0 10px 15px -3px rgba(15, 52, 61, 0.08), 0 4px 6px -4px rgba(15, 52, 61, 0.06);
  --shadow-lg: 0 24px 48px -12px rgba(15, 52, 61, 0.25);
  --scrim: rgba(15, 23, 42, 0.35);
  --success: #16a34a;
  --warning: #ca8a04;
  --c-photo: #3b82f6;
  --c-illustration: #a855f7;
  --c-vector: #ea580c;
  --c-video: #e11d48;
  --c-all: #0891b2;
}