/* =========================================================================
   Neuralytica — Colors & Type
   Extracted from P448/app/globals.css, P448/app/page.tsx, P448/components/*
   Dashboard is dark-mode-first: deep violet canvas with cyan/amber/rose
   data accents. Tailwind slate-* backs every surface; emerald/amber/orange/
   red carry traffic-light risk semantics.
   ========================================================================= */

:root {
  /* ---------- Brand ---------- */
  --brand-navy:          #0a0f2c; /* canvas base — deep navy */
  --brand-indigo:        #1b2466; /* canvas mid — indigo */
  --brand-plum:          #5a2a7a; /* canvas bloom — warm magenta/plum */
  --brand-cyan-edge:     #0e3a5a; /* right-edge cool cyan glow */
  --brand-violet-legacy: #1a0d2e; /* dashboard-only flat fallback */
  --brand-cyan:          #22d3ee; /* cyan-400, primary accent / "Brain" */
  --brand-cyan-soft:     #67e8f9; /* cyan-300 */
  --brand-purple:        #a855f7; /* purple-500, "Body" */
  --brand-logo-cyan:     #1FB6F0;
  --brand-logo-indigo:   #3936B5;

  /* Signature canvas gradient — match marketing hero */
  --canvas-gradient:
    radial-gradient(90% 120% at 35% 55%, rgba(120, 50, 140, 0.55) 0%, rgba(120, 50, 140, 0) 55%),
    radial-gradient(70% 90% at 95% 40%, rgba(20, 90, 140, 0.55) 0%, rgba(20, 90, 140, 0) 60%),
    linear-gradient(135deg, #0a0f2c 0%, #171f58 45%, #2a1d5e 75%, #0e2a4a 100%);

  /* ---------- Neutrals (Slate) — every surface in the product ---------- */
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;

  /* ---------- Semantic surfaces (dark) ---------- */
  --bg:            var(--brand-violet-legacy); /* legacy flat fallback; prefer --canvas-gradient on bg */
  --surface-1:     rgba(15, 23, 42, 0.50);     /* bg-slate-900/50 — primary card */
  --surface-2:     rgba(30, 41, 59, 0.50);     /* bg-slate-800/50 — inset panel */
  --surface-3:     rgba(15, 23, 42, 0.30);     /* bg-slate-900/30 — secondary card */
  --surface-hover: rgba(30, 41, 59, 0.30);     /* hover:bg-slate-800/30 */
  --border:        #334155;                    /* border-slate-700 */
  --border-soft:   #1e293b;                    /* border-slate-800 */
  --border-strong: #475569;                    /* border-slate-600 */

  /* ---------- Foreground (dark) ---------- */
  --fg-1: #ffffff;           /* primary copy */
  --fg-2: #e2e8f0;           /* slate-200 — strong secondary */
  --fg-3: #cbd5e1;           /* slate-300 — descriptive body */
  --fg-4: #94a3b8;           /* slate-400 — labels / meta */
  --fg-5: #64748b;           /* slate-500 — micro meta / captions */
  --fg-6: #475569;           /* slate-600 — separator glyphs */

  /* ---------- Status / Risk (traffic-light) ---------- */
  --ok:        #34d399; /* emerald-400 — green / good */
  --ok-bg:     rgba(16, 185, 129, 0.20);
  --ok-border: rgba(16, 185, 129, 0.30);

  --warn:        #fbbf24; /* amber-400 — yellow / moderate */
  --warn-bg:     rgba(245, 158, 11, 0.20);
  --warn-border: rgba(245, 158, 11, 0.30);

  --alert:        #fb923c; /* orange-400 — elevated */
  --alert-bg:     rgba(249, 115, 22, 0.20);
  --alert-border: rgba(249, 115, 22, 0.30);

  --danger:        #f87171; /* red-400 — high */
  --danger-bg:     rgba(239, 68, 68, 0.20);
  --danger-border: rgba(239, 68, 68, 0.30);

  --acute: #b91c1c; /* red-700 — acute / critical */

  /* ---------- Data viz accents ---------- */
  --data-brain:   var(--brand-cyan);  /* "Brain Control" line */
  --data-body:    var(--brand-purple);/* "Physical Execution" line */
  --data-insight: #facc15;            /* yellow-400 — takeaways */
  --data-coach:   #22d3ee;            /* cyan-400 — coach quotes */
  --data-unlock:  #fbbf24;            /* amber-400 — unlock pill */

  /* ---------- Elevation ---------- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.20);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.30), 0 1px 1px rgba(0,0,0,.20);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.40), 0 2px 4px -2px rgba(0,0,0,.30);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.50), 0 4px 6px -4px rgba(0,0,0,.40);
  --glow-cyan:  0 0 8px rgba(34, 211, 238, 0.60);
  --glow-white: 0 0 8px rgba(255, 255, 255, 0.60); /* risk-score indicator dot */

  /* ---------- Radii (from --radius: 0.625rem / 10px) ---------- */
  --radius-sm: 6px;   /* calc(--radius - 4px) */
  --radius-md: 8px;   /* calc(--radius - 2px) */
  --radius-lg: 10px;  /* --radius */
  --radius-xl: 14px;  /* calc(--radius + 4px) */
  --radius-pill: 9999px;

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

  /* ---------- Type ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (dashboard-native) */
  --fs-hero:     30px;   /* text-3xl — metric values, e.g. "88%" */
  --fs-h1:       24px;   /* text-2xl — column headers, big numerals */
  --fs-h2:       18px;   /* text-lg   — card titles */
  --fs-h3:       16px;   /* text-base — section headings */
  --fs-body:     14px;   /* text-sm   — body copy, insights */
  --fs-meta:     12px;   /* text-xs   — labels, captions */
  --fs-micro:    10px;   /* text-[10px] — whisker/axis labels */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.5;

  --tracking-wide: 0.06em;   /* uppercase micro-labels */
  --tracking-tight: -0.01em; /* headlines */

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

/* =========================================================================
   Semantic type primitives — the dashboard speaks in these patterns.
   ========================================================================= */

.nl-hero-metric {
  font: var(--weight-bold) var(--fs-hero)/var(--lh-tight) var(--font-sans);
  letter-spacing: var(--tracking-tight);
}
.nl-hero-unit {
  font-size: var(--fs-h2);
  color: var(--fg-5);
  font-weight: var(--weight-regular);
}

.nl-h1 {
  font: var(--weight-bold) var(--fs-h1)/var(--lh-tight) var(--font-sans);
  letter-spacing: var(--tracking-tight);
}
.nl-h2 {
  font: var(--weight-semibold) var(--fs-h2)/var(--lh-snug) var(--font-sans);
  color: var(--fg-3);
}
.nl-h3 {
  font: var(--weight-semibold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  color: var(--fg-4);
}

.nl-body {
  font: var(--weight-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--fg-3);
}
.nl-body-strong {
  font: var(--weight-medium) var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--fg-2);
}

.nl-label {
  font: var(--weight-medium) var(--fs-meta)/1.2 var(--font-sans);
  color: var(--fg-4);
}
.nl-eyebrow {
  font: var(--weight-medium) var(--fs-meta)/1.2 var(--font-sans);
  color: var(--fg-5);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.nl-micro {
  font-size: var(--fs-micro);
  color: var(--fg-5);
}

/* Signature callout patterns — used across every metric card */
.nl-takeaway {
  font: var(--weight-medium) var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--data-insight); /* yellow-400 */
}
.nl-coach-quote {
  font: italic var(--weight-regular) var(--fs-meta)/var(--lh-body) var(--font-sans);
  color: var(--data-coach); /* cyan-400 */
}

/* Status pills — used for risk levels on every card */
.nl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font: var(--weight-bold) var(--fs-meta)/1 var(--font-sans);
  border: 1px solid transparent;
}
.nl-pill--ok    { background: var(--ok-bg);    color: var(--ok);    border-color: var(--ok-border); }
.nl-pill--warn  { background: var(--warn-bg);  color: var(--warn);  border-color: var(--warn-border); }
.nl-pill--alert { background: var(--alert-bg); color: var(--alert); border-color: var(--alert-border); }
.nl-pill--danger{ background: var(--danger-bg);color: var(--danger);border-color: var(--danger-border); }