/* ===================================================================
   CORTEX CABINET — DESIGN TOKENS  (Infracortex / Cortex brand)
   Direction: editorial-technical "atlas" — Stripe docs x WSJ longform
   x governance audit report. Light-first, dark first-class.
   Anti-slop: NO Inter/Geist, NO purple-pink, NO generic SaaS blue.
   Source of truth for ALL cabinet screens. Do not hardcode colors.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* --- color: LIGHT (default) — warm ivory paper + deep navy ink --- */
  --bg-1: oklch(0.985 0.006 85);     /* ivory paper            */
  --bg-2: oklch(0.965 0.008 85);     /* raised surface / card  */
  --bg-3: oklch(0.935 0.010 88);     /* sunken / atlas canvas  */
  --ink:      oklch(0.245 0.040 255);/* deep navy ink (text)   */
  --ink-soft: oklch(0.455 0.030 255);/* muted navy (secondary) */
  --ink-faint:oklch(0.620 0.022 255);/* hairline labels        */
  --line:     oklch(0.890 0.012 255);/* borders                */
  --line-strong: oklch(0.820 0.016 255);
  --accent:      oklch(0.620 0.090 195);/* muted teal           */
  --accent-deep: oklch(0.510 0.100 198);/* teal pressed         */
  --accent-wash: oklch(0.940 0.030 195);/* teal tint surface    */
  --gold:     oklch(0.745 0.105 78);  /* ochre seal / highlight */
  --gold-wash:oklch(0.945 0.040 80);
  --ok:    oklch(0.610 0.110 150);
  --warn:  oklch(0.720 0.130 70);
  --danger:oklch(0.575 0.165 25);

  /* --- typography --- */
  --font-display: 'Source Serif 4', Charter, 'IBM Plex Serif', Georgia, serif;
  --font-body:    'Source Serif 4', Charter, Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --t-hero: 2.6rem; --t-h1: 2.0rem; --t-h2: 1.45rem; --t-h3: 1.15rem;
  --t-body: 1.02rem; --t-sm: 0.9rem; --t-meta: 0.78rem;
  --lh-tight: 1.18; --lh-body: 1.6;
  --track-label: 0.08em; /* letterspacing for mono uppercase labels */

  /* --- spacing (4px base, 8 steps) --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* --- radius (3 steps) --- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  /* --- shadow (3 steps, navy-tinted, paper depth) --- */
  --sh-sm: 0 1px 2px oklch(0.245 0.04 255 / 0.07);
  --sh-md: 0 4px 16px oklch(0.245 0.04 255 / 0.09);
  --sh-lg: 0 14px 44px oklch(0.245 0.04 255 / 0.13);

  /* --- motion --- */
  --m-fast: 120ms; --m-base: 220ms; --m-slow: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io:  cubic-bezier(0.6, 0, 0.2, 1);

  --maxw-prose: 68ch; --maxw-app: 1240px;
}

[data-theme="dark"] {
  --bg-1: oklch(0.200 0.030 255);
  --bg-2: oklch(0.255 0.030 256);
  --bg-3: oklch(0.300 0.035 256);
  --ink:      oklch(0.935 0.010 85);
  --ink-soft: oklch(0.760 0.018 85);
  --ink-faint:oklch(0.620 0.020 90);
  --line:     oklch(0.360 0.022 256);
  --line-strong: oklch(0.440 0.026 256);
  --accent:      oklch(0.705 0.090 195);
  --accent-deep: oklch(0.620 0.095 197);
  --accent-wash: oklch(0.300 0.045 200);
  --gold:     oklch(0.800 0.105 80);
  --gold-wash:oklch(0.320 0.050 80);
  --sh-sm: 0 1px 2px oklch(0 0 0 / 0.40);
  --sh-md: 0 4px 18px oklch(0 0 0 / 0.45);
  --sh-lg: 0 16px 48px oklch(0 0 0 / 0.55);
}

/* =========================== BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg-1); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  /* faint atlas grid on the canvas */
  background-image:
    linear-gradient(oklch(0.5 0.02 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.5 0.02 255 / 0.035) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); margin: 0 0 var(--s3); letter-spacing: -0.01em; }
h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); }
p { margin: 0 0 var(--s4); max-width: var(--maxw-prose); }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* mono micro-labels (the "technical" chrome) */
.label { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint); }
.metric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sec-no { font-family: var(--font-mono); color: var(--accent-deep); font-weight: 600; }

/* layout shell */
.app { max-width: var(--maxw-app); margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap: var(--s4);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: var(--bg-1); position: sticky; top:0; z-index:20; }
.brandmark { display:flex; align-items:center; gap: var(--s3); font-family: var(--font-display); font-weight:700; }
.brandmark .dot { width:14px; height:14px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent), var(--ink)); box-shadow: var(--sh-sm); }
.crumbs { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--ink-faint); letter-spacing: var(--track-label); }
.crumbs a { color: var(--ink-soft); }

/* card / panel */
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-sm); transition: box-shadow var(--m-base) var(--ease-out), transform var(--m-base) var(--ease-out), border-color var(--m-base); }
.card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--line-strong); }
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }

/* button: editorial, serif-weighted (NOT a shadcn pill) */
.btn { display:inline-flex; align-items:center; gap: var(--s2); font-family: var(--font-mono);
  font-size: var(--t-sm); letter-spacing: 0.02em; padding: 10px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg-1); cursor: pointer;
  transition: transform var(--m-fast) var(--ease-out), background var(--m-base), box-shadow var(--m-base); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-md); text-decoration:none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--accent { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bg-1); }

/* status pill (LIVE / DEV / WIP / DRAFT) */
.pill { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill); border:1px solid currentColor; }
.pill--live  { color: var(--ok); }
.pill--dev   { color: var(--gold); }
.pill--draft { color: var(--ink-faint); }
.pill--wip   { color: var(--warn); }

/* progress ring helper (set --p: 0..100) */
.ring { --p: 0; width:38px; height:38px; border-radius:50%;
  background: conic-gradient(var(--accent) calc(var(--p)*1%), var(--bg-3) 0);
  display:grid; place-items:center; }
.ring::after { content:''; width:28px; height:28px; border-radius:50%; background: var(--bg-2); }

@media (max-width: 640px){
  :root { --t-hero: 2.0rem; --t-h1: 1.6rem; --t-h2: 1.25rem; }
  .app { padding: var(--s5) var(--s4) var(--s7); }
  .topbar { padding: var(--s3) var(--s4); }
}