/* ============================================================================
   OpenSource Atlas — theme.css
   The single source of truth for every visual value.
   3-tier architecture: primitive -> semantic -> component.
   Generated from tokens/*.json (DTCG). Nothing in styles.css may hardcode
   a colour, size, radius or duration — reference these variables only.
   Theme switch: [data-theme="dark"] (default) / [data-theme="light"].
   ========================================================================== */

:root {
  /* ---- 1. PRIMITIVES (never reference directly in components) ---------- */
  --primitive-white: #ffffff;
  --primitive-black: #000000;

  --primitive-gray-50: #f9fafb;
  --primitive-gray-100: #f3f4f6;
  --primitive-gray-200: #e5e7eb;
  --primitive-gray-300: #d1d5db;
  --primitive-gray-400: #9ca3af;
  --primitive-gray-500: #6b7280;
  --primitive-gray-600: #4b5563;
  --primitive-gray-700: #374151;
  --primitive-gray-800: #1f2937;
  --primitive-gray-900: #111827;
  --primitive-gray-950: #030712;

  --primitive-blue-50: #eff6ff;
  --primitive-blue-100: #dbeafe;
  --primitive-blue-200: #bfdbfe;
  --primitive-blue-300: #93c5fd;
  --primitive-blue-400: #60a5fa;
  --primitive-blue-500: #3b82f6;
  --primitive-blue-600: #2563eb;
  --primitive-blue-700: #1d4ed8;
  --primitive-blue-800: #1e40af;
  --primitive-blue-900: #1e3a8a;
  --primitive-blue-950: #172554;

  --primitive-green-50: #f0fdf4;
  --primitive-green-100: #dcfce7;
  --primitive-green-300: #86efac;
  --primitive-green-400: #4ade80;
  --primitive-green-600: #16a34a;
  --primitive-green-700: #15803d;
  --primitive-green-800: #166534;

  --primitive-red-50: #fef2f2;
  --primitive-red-100: #fee2e2;
  --primitive-red-300: #fca5a5;
  --primitive-red-400: #f87171;
  --primitive-red-500: #ef4444;
  --primitive-red-600: #dc2626;
  --primitive-red-700: #b91c1c;
  --primitive-red-800: #991b1b;

  --primitive-amber-50: #fffbeb;
  --primitive-amber-100: #fef3c7;
  --primitive-amber-300: #fcd34d;
  --primitive-amber-400: #fbbf24;
  --primitive-amber-600: #d97706;
  --primitive-amber-700: #b45309;
  --primitive-amber-800: #92400e;

  --primitive-purple-50: #faf5ff;
  --primitive-purple-100: #f3e8ff;
  --primitive-purple-300: #d8b4fe;
  --primitive-purple-400: #c084fc;
  --primitive-purple-600: #9333ea;
  --primitive-purple-700: #7e22ce;

  /* ---- 2. TYPOGRAPHY (Major Third scale) ------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

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

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-widest: 0.1em;

  --measure-prose: 68ch;

  /* ---- 3. SPACING (4px base) ------------------------------------------- */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- 4. RADIUS & BORDERS --------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --border-thin: 1px;
  --border-medium: 2px;

  /* ---- 5. ELEVATION ---------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-overlay: 0 24px 48px -12px rgba(0, 0, 0, 0.55);

  /* ---- 6. MOTION ------------------------------------------------------- */
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-moderate: 300ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- 7. LAYOUT & Z-INDEX --------------------------------------------- */
  --layout-rail: 320px;
  --layout-panel: 420px;
  --z-sticky: 20;
  --z-overlay: 40;

  /* ---- 8. DATA-VIZ (branch legend) ------------------------------------- */
  --viz-1: #2563eb;
  --viz-2: #e8710a;
  --viz-3: #0e9f6e;
  --viz-4: #d81b7a;
  --viz-5: #7c3aed;
  --viz-6: #0891b2;
  --viz-7: #b45309;
  --viz-8: #64748b;
  --viz-9: #60a5fa;
  --viz-10: #fbbf24;
  --viz-11: #4ade80;
  --viz-12: #c084fc;
  --viz-13: #f87171;
  --viz-14: #9ca3af;
  --viz-15: #93c5fd;
  --viz-16: #6ee7b7;

  /* ---- 9. SEMANTIC — LIGHT (default) ----------------------------------- */
  --color-action-primary: var(--primitive-blue-600);
  --color-action-primary-hover: var(--primitive-blue-700);
  --color-action-primary-active: var(--primitive-blue-800);
  --color-action-secondary: var(--primitive-gray-100);
  --color-action-secondary-hover: var(--primitive-gray-200);
  --color-action-destructive: var(--primitive-red-600);

  --color-text-primary: var(--primitive-gray-900);
  --color-text-secondary: var(--primitive-gray-600);
  --color-text-tertiary: var(--primitive-gray-500);
  --color-text-disabled: var(--primitive-gray-300);
  --color-text-on-action: var(--primitive-white);
  --color-text-link: var(--primitive-blue-600);
  --color-text-link-hover: var(--primitive-blue-800);

  --color-surface-page: var(--primitive-white);
  --color-surface-card: var(--primitive-white);
  --color-surface-raised: var(--primitive-white);
  --color-surface-sunken: var(--primitive-gray-50);
  --color-surface-disabled: var(--primitive-gray-100);
  --color-surface-overlay: rgba(0, 0, 0, 0.5);

  --color-border-default: var(--primitive-gray-200);
  --color-border-strong: var(--primitive-gray-500);
  --color-border-focus: var(--primitive-blue-500);

  --color-interactive-hover: rgba(0, 0, 0, 0.04);
  --color-interactive-active: rgba(0, 0, 0, 0.08);
  --color-selected-bg: var(--primitive-blue-50);
  --color-selected-border: var(--primitive-blue-200);

  --color-success-text: var(--primitive-green-800);
  --color-success-bg: var(--primitive-green-50);
  --color-success-border: var(--primitive-green-300);
  --color-warning-text: var(--primitive-amber-800);
  --color-warning-bg: var(--primitive-amber-50);
  --color-warning-border: var(--primitive-amber-300);
  --color-danger-text: var(--primitive-red-800);
  --color-danger-bg: var(--primitive-red-50);
  --color-danger-border: var(--primitive-red-300);

  /* ---- 10. COMPONENT --------------------------------------------------- */
  --btn-primary-bg: var(--color-action-primary);
  --btn-primary-bg-hover: var(--color-action-primary-hover);
  --btn-primary-bg-active: var(--color-action-primary-active);
  --btn-primary-text: var(--color-text-on-action);
  --btn-secondary-bg: var(--color-action-secondary);
  --btn-secondary-bg-hover: var(--color-action-secondary-hover);
  --btn-secondary-text: var(--color-text-primary);
  --btn-ghost-bg-hover: var(--color-interactive-hover);
  --btn-ghost-text: var(--color-text-secondary);
  --btn-radius: var(--radius-md);
  --btn-pad-x: var(--space-3-5);
  --btn-pad-y: var(--space-2);
  --btn-min-height: var(--space-8);

  --input-bg: var(--color-surface-card);
  --input-border: var(--color-border-default);
  --input-border-hover: var(--color-border-strong);
  --input-border-focus: var(--color-border-focus);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-tertiary);
  --input-radius: var(--radius-lg);

  --card-bg: var(--color-surface-card);
  --card-border: var(--color-border-default);
  --card-radius: var(--radius-xl);
  --card-pad: var(--space-4);

  --badge-neutral-bg: var(--primitive-gray-100);
  --badge-neutral-text: var(--primitive-gray-700);
  --badge-primary-bg: var(--primitive-blue-100);
  --badge-primary-text: var(--primitive-blue-700);
  --badge-success-bg: var(--primitive-green-100);
  --badge-success-text: var(--primitive-green-700);
  --badge-warning-bg: var(--primitive-amber-100);
  --badge-warning-text: var(--primitive-amber-700);
  --badge-danger-bg: var(--primitive-red-100);
  --badge-danger-text: var(--primitive-red-700);

  --focus-ring: 0 0 0 var(--border-medium) var(--color-surface-page),
                0 0 0 var(--space-1) var(--color-border-focus);
}

/* ---- DARK THEME (app default) — semantics swap, primitives do not ------ */
:root[data-theme="dark"] {
  --color-action-primary: var(--primitive-blue-600);
  --color-action-primary-hover: var(--primitive-blue-500);
  --color-action-primary-active: var(--primitive-blue-400);
  --color-action-secondary: var(--primitive-gray-800);
  --color-action-secondary-hover: var(--primitive-gray-700);
  --color-action-destructive: var(--primitive-red-500);

  --color-text-primary: var(--primitive-gray-50);
  --color-text-secondary: var(--primitive-gray-300);
  --color-text-tertiary: var(--primitive-gray-400);
  --color-text-disabled: var(--primitive-gray-600);
  --color-text-on-action: var(--primitive-white);
  --color-text-link: var(--primitive-blue-400);
  --color-text-link-hover: var(--primitive-blue-300);

  --color-surface-page: var(--primitive-gray-950);
  --color-surface-card: var(--primitive-gray-900);
  --color-surface-raised: var(--primitive-gray-800);
  --color-surface-sunken: var(--primitive-black);
  --color-surface-disabled: var(--primitive-gray-800);

  --color-border-default: var(--primitive-gray-800);
  --color-border-strong: var(--primitive-gray-500);
  --color-border-focus: var(--primitive-blue-400);

  --color-interactive-hover: rgba(255, 255, 255, 0.05);
  --color-interactive-active: rgba(255, 255, 255, 0.09);
  --color-selected-bg: var(--primitive-blue-950);
  --color-selected-border: var(--primitive-blue-700);

  --color-success-text: var(--primitive-green-400);
  --color-success-bg: var(--primitive-green-800);
  --color-warning-text: var(--primitive-amber-400);
  --color-warning-bg: var(--primitive-amber-800);
  --color-danger-text: var(--primitive-red-400);

  --badge-neutral-bg: var(--primitive-gray-800);
  --badge-neutral-text: var(--primitive-gray-300);
  --badge-primary-bg: var(--primitive-blue-950);
  --badge-primary-text: var(--primitive-blue-300);
  --badge-success-bg: var(--primitive-green-800);
  --badge-success-text: var(--primitive-green-100);
  --badge-warning-bg: var(--primitive-amber-800);
  --badge-warning-text: var(--primitive-amber-100);
  --badge-danger-bg: var(--primitive-red-800);
  --badge-danger-text: var(--primitive-red-100);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}