/* ============================================================================
   Design tokens.
   Every colour, space, radius, shadow and type step in the application resolves
   to one of these. Both themes define the same names so components never need
   to know which theme is active.
   ========================================================================== */

:root {
  /* --- typography ------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */

  --leading-tight: 1.2;
  --leading-normal: 1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- spacing: a strict 4px scale -------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* --- layout ----------------------------------------------------------- */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 60px;
  --content-max: 1240px;

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;

  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 100;

  /* --- brand ramp (identical in both themes) ---------------------------- */
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;

  /* --- light theme ------------------------------------------------------ */
  --bg-canvas: #f6f7fb;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-subtle: #f1f3f9;
  --bg-inset: #eceffa;
  --bg-hover: rgba(15, 23, 42, 0.045);
  --bg-active: rgba(79, 70, 229, 0.1);

  --text-strong: #0f172a;
  --text-body: #27324a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --text-inverse: #ffffff;

  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-soft: #eef2ff;
  --accent-text: var(--brand-700);

  --success: #047857;
  --success-soft: #d1fae5;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --info: #0369a1;
  --info-soft: #e0f2fe;

  --priority-low: #0891b2;
  --priority-medium: #4f46e5;
  --priority-high: #c2410c;
  --priority-critical: #be123c;

  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.45);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);

  --scrim: rgba(15, 23, 42, 0.45);
}

/* --- dark theme: only the tokens that differ ---------------------------- */
:root[data-theme="dark"] {
  --bg-canvas: #0b1020;
  --bg-surface: #131a2c;
  --bg-surface-raised: #1a2236;
  --bg-subtle: #182034;
  --bg-inset: #0f1626;
  --bg-hover: rgba(226, 232, 240, 0.06);
  --bg-active: rgba(129, 140, 248, 0.16);

  --text-strong: #f1f5f9;
  --text-body: #cbd5e1;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --text-inverse: #0b1020;

  --border: #26314a;
  --border-strong: #35425f;

  --accent: var(--brand-400);
  --accent-hover: #a5b4fc;
  --accent-soft: rgba(129, 140, 248, 0.14);
  --accent-text: #a5b4fc;

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.15);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.15);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.15);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.15);

  --priority-low: #22d3ee;
  --priority-medium: #a5b4fc;
  --priority-high: #fb923c;
  --priority-critical: #fb7185;

  --focus-ring: 0 0 0 3px rgba(165, 180, 252, 0.5);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);

  --scrim: rgba(2, 6, 23, 0.7);
}