/* ============================================================
   AIDLC Command Centre — Design Tokens
   Restrained, semantic, dual-mode. Inspired by Linear, Vercel,
   Stripe, Notion. 8px spacing baseline.
   ============================================================ */

:root {
  /* --- Spacing scale (4/8/12/16/24/32/48) --- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- Radii --- */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* --- Type scale --- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;

  /* --- Semantic colors — neutral across modes --- */
  --accent: #4A90D9;   /* primary / active */
  --accent-600: #2E6BA6;
  --accent-100: rgba(74, 144, 217, 0.12);

  --success: #48B07A;
  --success-100: rgba(72, 176, 122, 0.12);

  --warning: #E6A243;
  --warning-100: rgba(230, 162, 67, 0.14);

  --danger: #D96459;
  --danger-100: rgba(217, 100, 89, 0.14);

  --highlight: #9B6FD4;
  --highlight-100: rgba(155, 111, 212, 0.14);

  /* --- Transitions --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms var(--ease);
  --t-base: 200ms var(--ease);
  --t-slow: 320ms var(--ease);

  /* --- Shell dimensions --- */
  --topbar-h: 56px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --content-max: 1280px;

  /* --- Font stacks --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono',
    Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ============================================================
   DARK MODE (default) — true black canvas
   Pure #000 ground with progressively lifted surfaces. Text
   colors tuned for WCAG AA+ contrast against #000.
   ============================================================ */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bg: #000000;                /* true black — main canvas */
  --bg-1: #08090B;              /* sidebar — slight lift off black */
  --bg-2: #101216;              /* card default */
  --bg-3: #1A1D22;              /* hover / selected state */
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.09);

  --surface: #0C0E12;           /* card surface */
  --surface-raised: #14171D;    /* raised panel */
  --surface-sunken: #050608;    /* sunken — inputs, code */

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-subtle: rgba(255, 255, 255, 0.06);

  --text: #FFFFFF;              /* primary — was #E8EAED */
  --text-2: #D4D8E0;            /* secondary — was #B4BAC4 */
  --text-3: #9CA3AF;            /* tertiary — was #818896 */
  --text-4: #6B7280;            /* muted  — was #555C6A */

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.8);

  /* Glass surfaces — darker for pure-black canvas */
  --glass-bg: rgba(8, 9, 11, 0.82);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Code blocks */
  --code-bg: #050608;
  --code-border: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   LIGHT MODE — cards must pop from the canvas
   Stronger borders (0.12+), darker canvas, visible shadows.
   ============================================================ */
[data-theme='light'] {
  color-scheme: light;

  --bg: #F1F2F5;              /* canvas — was #F7F8FA, darker so cards pop */
  --bg-1: #F8F9FB;            /* sidebar — slightly lighter than canvas */
  --bg-2: #FFFFFF;            /* cards */
  --bg-3: #E9EBF0;            /* hover / selected — more visible than before */
  --bg-hover: rgba(15, 18, 22, 0.05);
  --bg-active: rgba(15, 18, 22, 0.08);

  --surface: #FFFFFF;          /* card surface */
  --surface-raised: #FFFFFF;   /* raised panel — distinguished by shadow, not color */
  --surface-sunken: #EDEFF3;   /* sunken (inputs) — darker than before */

  --border: rgba(15, 18, 22, 0.14);        /* was 0.08 — much more visible */
  --border-strong: rgba(15, 18, 22, 0.22); /* was 0.14 */
  --border-subtle: rgba(15, 18, 22, 0.08); /* was 0.05 */

  --text: #0A0D12;             /* was #0F1216 — slightly darker for readability */
  --text-2: #323841;           /* was #3A424D */
  --text-3: #5A6370;           /* was #606874 */
  --text-4: #858C98;           /* was #9098A4 */

  --shadow-1: 0 1px 3px rgba(15, 18, 22, 0.08), 0 1px 2px rgba(15, 18, 22, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 18, 22, 0.10), 0 1px 4px rgba(15, 18, 22, 0.06);
  --shadow-3: 0 12px 32px rgba(15, 18, 22, 0.14), 0 2px 8px rgba(15, 18, 22, 0.08);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(15, 18, 22, 0.12);

  --code-bg: #EDEFF3;
  --code-border: rgba(15, 18, 22, 0.10);
}

/* Light mode — cards get a subtle always-on shadow so they lift from canvas */
[data-theme='light'] .card,
[data-theme='light'] .stat-card,
[data-theme='light'] .phase-card,
[data-theme='light'] .kanban-card,
[data-theme='light'] .mission-phase-card,
[data-theme='light'] .ideation-card,
[data-theme='light'] .conflict-card,
[data-theme='light'] .friction-card {
  box-shadow: var(--shadow-1);
}