/* ============================================================
   AI Studio Design System — globals.css
   v1.0 · shadcn-convention tokens (:root = light, .dark = dark)
   Drop into a Next.js / Tailwind / shadcn project as-is.
   ============================================================ */

:root {
  /* ---------- Primitive ramps (theme-invariant) ---------- */

  /* Neutral — layered slate/graphite scale */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8f9fb;
  --neutral-100: #f1f3f6;
  --neutral-200: #e4e7ec;
  --neutral-300: #cdd2db;
  --neutral-400: #9aa1ae;
  --neutral-500: #6c7482;
  --neutral-600: #4e5561;
  --neutral-700: #3a404b;
  --neutral-800: #262b34;
  --neutral-900: #181c23;
  --neutral-950: #101318;

  /* Accent — deep blue / indigo, "trust + intelligence" */
  --accent-50:  #f0f4fe;
  --accent-100: #e0e9fd;
  --accent-200: #c2d3fb;
  --accent-300: #94b3f7;
  --accent-400: #6690f0;
  --accent-500: #4370e4;
  --accent-600: #3057c9;
  --accent-700: #2646a3;
  --accent-800: #203a82;
  --accent-900: #1d3067;
  --accent-950: #131e42;

  /* Categorical chart palette — 8 hues, both-theme safe */
  --chart-1: #4370e4;  /* blue    */
  --chart-2: #1fa294;  /* teal    */
  --chart-3: #e39a17;  /* amber   */
  --chart-4: #8b5cf6;  /* violet  */
  --chart-5: #d4569e;  /* magenta */
  --chart-6: #56a65b;  /* green   */
  --chart-7: #3aa6dc;  /* sky     */
  --chart-8: #8a93a6;  /* slate   */

  /* ---------- Severity system (light values) ---------- */
  /* critical = red · warning = amber · ok = green · info/stale = slate.
     Always pair with an icon — never color alone. */
  --severity-critical:        #d6293a;
  --severity-critical-fg:     #ac1f2f;
  --severity-critical-bg:     #fdecee;
  --severity-critical-border: #f5c2c8;

  --severity-warning:         #e8960e;
  --severity-warning-fg:      #935c08;
  --severity-warning-bg:      #fcf3e1;
  --severity-warning-border:  #f0d9a8;

  --severity-ok:              #1f9d55;
  --severity-ok-fg:           #147045;
  --severity-ok-bg:           #e7f6ee;
  --severity-ok-border:       #bce5ce;

  --severity-info:            #64748b;
  --severity-info-fg:         #5a6372;
  --severity-info-bg:         #f1f3f6;
  --severity-info-border:     #dde1e8;

  /* ---------- Semantic tokens — LIGHT ---------- */
  --background:            var(--neutral-50);
  --foreground:            var(--neutral-900);

  --card:                  var(--neutral-0);
  --card-foreground:       var(--neutral-900);
  --popover:               var(--neutral-0);
  --popover-foreground:    var(--neutral-900);

  --primary:               var(--accent-600);
  --primary-hover:         var(--accent-700);
  --primary-foreground:    #ffffff;

  --secondary:             var(--neutral-100);
  --secondary-foreground:  var(--neutral-700);

  --muted:                 var(--neutral-100);
  --muted-foreground:      var(--neutral-500);

  --subtle-foreground:     var(--neutral-400);

  --destructive:           var(--severity-critical);
  --destructive-foreground:#ffffff;

  --border:                var(--neutral-200);
  --border-strong:         var(--neutral-300);
  --input:                 var(--neutral-300);
  --ring:                  var(--accent-500);

  /* Dual-value "reported vs real" treatment */
  --kpi-reported-fg:       var(--neutral-500);
  --kpi-real-fg:           var(--neutral-900);
  --kpi-divider:           var(--neutral-200);

  /* ---------- Shape, elevation, type, rhythm ---------- */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 10px;

  /* Borders structure surfaces; shadows are reserved for overlays. */
  --shadow-overlay: 0 8px 24px rgba(16, 19, 24, 0.12), 0 2px 6px rgba(16, 19, 24, 0.08);
  --shadow-toast:   0 6px 20px rgba(16, 19, 24, 0.16);

  --font-sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* 4px-base spacing scale, compact by default */
  --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;
}

.dark {
  /* ---------- Severity system (dark values) ---------- */
  --severity-critical:        #f0566a;
  --severity-critical-fg:     #ff8b99;
  --severity-critical-bg:     #391c22;
  --severity-critical-border: #5c2731;

  --severity-warning:         #f0a92e;
  --severity-warning-fg:      #f5b84d;
  --severity-warning-bg:      #362a14;
  --severity-warning-border:  #5c4620;

  --severity-ok:              #34b874;
  --severity-ok-fg:           #4fce8b;
  --severity-ok-bg:           #13301f;
  --severity-ok-border:       #1f4d33;

  --severity-info:            #9aa1ae;
  --severity-info-fg:         #9aa1ae;
  --severity-info-bg:         #262b34;
  --severity-info-border:     #3a404b;

  /* ---------- Semantic tokens — DARK ---------- */
  --background:            var(--neutral-950);
  --foreground:            var(--neutral-100);

  --card:                  var(--neutral-900);
  --card-foreground:       var(--neutral-100);
  --popover:               #1c212a;
  --popover-foreground:    var(--neutral-100);

  --primary:               var(--accent-400);
  --primary-hover:         var(--accent-300);
  --primary-foreground:    #0e1425;

  --secondary:             var(--neutral-800);
  --secondary-foreground:  var(--neutral-200);

  --muted:                 #1f242d;
  --muted-foreground:      var(--neutral-400);

  --subtle-foreground:     var(--neutral-500);

  --destructive:           #e04a57;
  --destructive-foreground:#ffffff;

  --border:                #2a303b;
  --border-strong:         var(--neutral-700);
  --input:                 var(--neutral-700);
  --ring:                  var(--accent-400);

  --kpi-reported-fg:       var(--neutral-400);
  --kpi-real-fg:           var(--neutral-100);
  --kpi-divider:           #2a303b;

  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-toast:   0 6px 20px rgba(0, 0, 0, 0.5);
}