/* ═══════════════════════════════════════════════════════════════
   TorCheck — Design tokens
   One source of truth. Components consume these, never raw values.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Type ─────────────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  25px;
  --text-3xl:  32px;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;

  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;

  /* ── Spacing (4px base) ───────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Motion ───────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 120ms var(--ease);
  --transition:      180ms var(--ease);

  /* ── Layout ───────────────────────────────────────────── */
  --sidebar-width: 240px;
  --topbar-height: 60px;

  /* ── Light theme colors ───────────────────────────────── */
  /* Surfaces */
  --color-bg:             #eceff4;
  --color-sidebar:        #11161f;
  --color-sidebar-hover:  #1c2430;
  --color-surface:        #ffffff;
  --color-surface-raised: #f5f7fa;
  --color-surface-hover:  #eef2f7;

  /* Text */
  --color-text-primary:   #15202e;
  --color-text-secondary: #586472;
  --color-text-muted:     #909aa8;
  --color-text-inverse:   #ffffff;
  --color-text:           var(--color-text-primary); /* alias */

  /* Accent */
  --color-accent:         #2563eb;
  --color-accent-hover:   #1d4ed8;
  --color-accent-soft:    #e8effd;

  /* Danger */
  --color-danger:         #dc2626;
  --color-danger-hover:   #b91c1c;

  /* Warning */
  --color-warning:        #b45309;
  --color-warning-soft:   #fef3c7;
  --color-warning-border: #fde68a;

  /* Borders */
  --color-border:         #e2e7ee;
  --color-border-strong:  #cbd3df;

  /* Sidebar-local (on dark) */
  --color-on-dark:        rgba(255, 255, 255, 0.72);
  --color-on-dark-muted:  rgba(255, 255, 255, 0.45);
  --color-on-dark-border: rgba(255, 255, 255, 0.14);
  --color-on-dark-hover:  rgba(255, 255, 255, 0.08);

  /* Toolbar */
  --color-toolbar:        #11161f;

  /* Status */
  --color-status-ok:      #15a24a;
  --color-status-warn:    #d97706;
  --color-status-done:    #64748b;
  --color-status-ok-soft:   #e4f5ea;
  --color-status-warn-soft: #fbf0dd;
  --color-status-na-soft:   #eef1f5;

  /* Scrim */
  --color-scrim: rgba(13, 18, 26, 0.5);

  /* ── Elevation ────────────────────────────────────────── */
  --shadow-xs:      0 1px 2px rgba(20, 27, 38, 0.06);
  --shadow-card:    0 1px 2px rgba(20, 27, 38, 0.06), 0 4px 12px rgba(20, 27, 38, 0.05);
  --shadow-raised:  0 2px 6px rgba(20, 27, 38, 0.08), 0 12px 28px rgba(20, 27, 38, 0.10);
  --shadow-overlay: 0 18px 48px rgba(13, 18, 26, 0.28);
}

/* ── Dark theme ─────────────────────────────────────────── */
html.dark {
  --color-bg:             #0c0f16;
  --color-sidebar:        #11151e;
  --color-sidebar-hover:  #1a2130;
  --color-surface:        #161b26;
  --color-surface-raised: #1d2330;
  --color-surface-hover:  #232a3a;

  --color-text-primary:   #eef2f8;
  --color-text-secondary: #97a3b6;
  --color-text-muted:     #5f6b7d;
  --color-text-inverse:   #ffffff;

  --color-accent:         #4b86f7;
  --color-accent-hover:   #3b74e6;
  --color-accent-soft:    #1b2742;

  --color-danger:         #f05252;
  --color-danger-hover:   #e02d2d;

  --color-warning:        #fbbf24;
  --color-warning-soft:   #2e2508;
  --color-warning-border: #4a3a0e;

  --color-border:         #272f3d;
  --color-border-strong:  #3a4456;

  --color-on-dark:        rgba(255, 255, 255, 0.72);
  --color-on-dark-muted:  rgba(255, 255, 255, 0.42);
  --color-on-dark-border: rgba(255, 255, 255, 0.12);
  --color-on-dark-hover:  rgba(255, 255, 255, 0.07);

  --color-toolbar:        #11151e;

  --color-status-ok:      #25b35e;
  --color-status-warn:    #eaa036;
  --color-status-done:    #8b98ab;
  --color-status-ok-soft:   #122a1d;
  --color-status-warn-soft: #2e2413;
  --color-status-na-soft:   #20283a;

  --color-scrim: rgba(0, 0, 0, 0.62);

  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-raised:  0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 18px 48px rgba(0, 0, 0, 0.66);
}