/* =====================================================================
   Cptlorbit design tokens — the ONLY place raw colours, sizes and shadows are defined.
   Every other stylesheet (and every module) uses these variables.
   Layers: 1) palette (primitive)  2) semantic (what things mean)  3) scale (space, type, radius, ...)
   ===================================================================== */
:root {
  /* 1. Palette (brand navy preserved from the original identity) */
  --brand-900: #1E3A8A;   /* identity: sidebar, primary buttons, logo */
  --brand-800: #2A4DA0;
  --brand-700: #3B5BB5;
  --accent-600: #2563EB;  /* interactive blue: links, focus, secondary actions */
  --accent-700: #1D4ED8;
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --slate-900: #0F172A;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white:     #FFFFFF;

  /* 2. Semantic colours */
  --bg:             var(--slate-50);       /* app background */
  --surface:        var(--white);          /* cards, panels, dialogs */
  --surface-muted:  var(--slate-50);       /* table headers, dialog footers */
  --surface-hover:  var(--slate-100);
  --text:           var(--slate-900);
  --text-muted:     var(--slate-600);      /* secondary text, 7:1 on white */
  --text-subtle:    var(--slate-500);      /* hints, captions, 4.7:1 on white */
  --text-on-brand:  var(--white);
  --border:         var(--slate-200);
  --border-strong:  var(--slate-300);
  --primary:        var(--brand-900);
  --primary-hover:  var(--brand-800);
  --link:           var(--accent-600);
  --link-hover:     var(--accent-700);
  --focus:          var(--accent-600);
  --nav-bg:         var(--brand-900);
  --nav-text:       #D6DFF5;
  --nav-text-strong:var(--white);
  --nav-hover:      rgba(255,255,255,.08);
  --nav-active:     rgba(255,255,255,.16);
  --nav-border:     rgba(255,255,255,.14);
  --nav-text-muted: #9FB0DD;
  --overlay:        rgba(15,23,42,.55);
  --glass:          rgba(255,255,255,.92);   /* translucent header on the public site */
  --on-brand-line:  rgba(255,255,255,.35);   /* outlines on brand-coloured backgrounds */
  --on-brand-hover: rgba(255,255,255,.08);

  /* Status colours: text / background / border. Use through .badge-*, .alert-*, never directly. */
  --ok:   #15803D; --ok-bg:   #DCFCE7; --ok-border:   #86EFAC;
  --warn: #B45309; --warn-bg: #FEF3C7; --warn-border: #FCD34D;
  --bad:  #B91C1C; --bad-bg:  #FEE2E2; --bad-border:  #FCA5A5;
  --bad-strong: #991B1B;
  --info: #1D4ED8; --info-bg: #DBEAFE; --info-border: #93C5FD;

  /* Chart palette (series colours differ in lightness as well as hue) */
  --chart-1: #2A4DA0;
  --chart-2: #94A3B8;
  --chart-3: #0F9D8A;
  --chart-4: #D97706;
  --chart-5: #7C3AED;
  --chart-6: #DB2777;
  --chart-grid: var(--slate-200);
  --chart-axis: var(--slate-500);
  --chart-track: var(--slate-200);

  /* 3. Scale */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: .95rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading: 1.55; --leading-tight: 1.2;

  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 12px rgba(15,23,42,.10);
  --shadow-lg: 0 20px 50px rgba(15,23,42,.30);

  --ring: 0 0 0 3px rgba(37,99,235,.30);   /* focus halo for inputs */
  --ring-bad: 0 0 0 3px rgba(185,28,28,.25);
  --shadow-hero: 0 20px 50px rgba(0,0,0,.35);
  --toast-bg: var(--slate-900); --toast-bad-bg: #450A0A; --toast-ok-line: #4ADE80; --toast-bad-line: #F87171;
  --control-h: 2.5rem;                      /* default control height */
  --control-h-sm: 2rem;

  --z-sticky: 30; --z-drawer: 50; --z-popover: 60; --z-tooltip: 70; --z-toast: 100;
  --ease: 160ms ease;

  /* Application shell geometry */
  --sidebar-w: 256px; --sidebar-w-collapsed: 72px; --topbar-h: 60px; --content-max: 1280px;
}