/* ==========================================================================
   Cortex Design System — Color & Type Tokens
   Derived from app/theme/brand-utils.tsx (brand color scale generator),
   shadcn/ui semantic naming used across @cortexapps/ui, and class-name
   usage scraped from the admin codebase.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* PT Root UI — brand UI typeface (uploaded by user, 2026-04) */
@font-face {
  font-family: 'PT Root UI';
  src: url('fonts/pt-root-ui_vf.ttf') format('truetype-variations'),
       url('fonts/pt-root-ui_regular.otf') format('opentype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Root UI';
  src: url('fonts/pt-root-ui_light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Root UI';
  src: url('fonts/pt-root-ui_regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Root UI';
  src: url('fonts/pt-root-ui_medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PT Root UI';
  src: url('fonts/pt-root-ui_bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand (Cortex purple #7458DB, scale 100–900) ---------- */
  --brand-50: #f5f2fb;
  --brand-100: #e6dff8;
  --brand-200: #c9bbef;
  --brand-300: #ac97e5;
  --brand-400: #9075dd;
  --brand-500: #7458db; /* DEFAULT_CORTEX_COLOR */
  --brand-600: #5f44bb;
  --brand-700: #4a3394;
  --brand-800: #38246d;
  --brand-900: #24153f;

  --brand-foreground-100: #24153f;
  --brand-foreground-500: #ffffff;
  --brand-foreground-900: #ffffff;
  --brand-foreground-mid: rgba(255, 255, 255, 0.82);
  --brand-foreground-dark: rgba(255, 255, 255, 0.6);
  --brand-foreground-dark-active: #ffffff;

  /* ---------- Neutral (warm slate) ---------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f4f4f5;
  --neutral-200: #e4e4e7;
  --neutral-300: #d4d4d8;
  --neutral-400: #a1a1aa;
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  --neutral-900: #18181b;
  --neutral-950: #0b0b0f;

  /* ---------- Semantic: text ---------- */
  --text:                         #18181b;
  --text-neutral-normal:          #27272a;
  --text-neutral-prominent:       #0b0b0f;
  --text-neutral-subtle:          #52525b;
  --text-neutral-muted:           #71717a;
  --text-neutral-inverse:         #ffffff;
  --text-brand:                   var(--brand-500);
  --text-success:                 #15803d;
  --text-danger:                  #b91c1c;
  --text-warning:                 #a16207;
  --text-info:                    #1d4ed8;

  /* ---------- Semantic: surfaces (shadcn layer naming) ---------- */
  --bg:                                        #ffffff;
  --bg-secondary:                              #fafafa;
  --layer-neutral-subtle-default:              #f4f4f5;
  --layer-neutral-subtle-hover:                #e4e4e7;
  --layer-neutral-normal-default:              #ffffff;
  --layer-neutral-normal-hover:                #fafafa;
  --layer-neutral-prominent-default:           #0f0b1a; /* dark sidebar */
  --layer-neutral-prominent-hover:             #1a1528;
  --layer-neutral-prominent-disabled:          rgba(255,255,255,.06);
  --layer-accent-prominent-fixed-default:      var(--brand-500);
  --layer-accent-prominent-fixed-hover:        var(--brand-600);
  --layer-success-normal-fixed-default:        #16a34a;
  --layer-success-muted-default:               #dcfce7;
  --layer-danger-normal-fixed-default:         #dc2626;
  --layer-danger-prominent-fixed-default:      #991b1b;
  --layer-danger-muted-default:                #fee2e2;
  --layer-warning-muted-default:               #fef3c7;
  --layer-info-normal-fixed-default:           #2563eb;

  /* ---------- Borders ---------- */
  --border:                        #e4e4e7;
  --border-neutral-normal:         #e4e4e7;
  --border-neutral-prominent:      #a1a1aa;
  --border-brand-20:               rgba(230, 223, 248, 0.20); /* brand-100 @ 20% — sidebar dividers */

  /* ---------- Sidebar gradient ---------- */
  --gradient-from:          #1a1028;
  --gradient-to:            #0a0614;
  --gradient-transparent:   rgba(10, 6, 20, 0);

  /* ---------- Chart palette ---------- */
  --chart-1-line: #7458db;   --chart-1-area: rgba(116,88,219,.18);
  --chart-2-line: #2563eb;   --chart-2-area: rgba(37,99,235,.18);
  --chart-3-line: #16a34a;   --chart-3-area: rgba(22,163,74,.18);
  --chart-4-line: #f59e0b;   --chart-4-area: rgba(245,158,11,.22);
  --chart-5-line: #ec4899;   --chart-5-area: rgba(236,72,153,.22);

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;   /* default card / button */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ---------- Spacing (4px grid) ---------- */
  --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;

  /* ---------- Shadows (restrained) ---------- */
  --shadow-xs: 0 1px 2px rgba(15,11,26,.04);
  --shadow-sm: 0 1px 3px rgba(15,11,26,.06), 0 1px 2px rgba(15,11,26,.04);
  --shadow-md: 0 4px 12px rgba(15,11,26,.08), 0 2px 4px rgba(15,11,26,.05);
  --shadow-popover: 0 8px 24px rgba(15,11,26,.12);

  /* ---------- Type ---------- */
  --font-display: 'Manrope', 'PT Root UI', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'PT Root UI', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Menlo', monospace;

  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 18px;
  --text-h4: 20px;
  --text-h3: 24px;
  --text-h2: 30px;
  --text-h1: 36px;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
}

/* ==========================================================================
   Semantic HTML defaults
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--text-h1);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text-neutral-prominent);
}
h2, .h2 {
  font-size: var(--text-h2);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text-neutral-prominent);
}
h3, .h3 {
  font-size: var(--text-h3);
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-neutral-prominent);
}
h4, .h4 {
  font-size: var(--text-h4);
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-neutral-prominent);
}
p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-neutral-normal);
}
.small { font-size: var(--text-sm); color: var(--text-neutral-subtle); }
.label { font-size: var(--text-sm); font-weight: 500; color: var(--text-neutral-normal); }

code, pre, .code, .code-xs {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}
.code-xs { font-size: 11px; letter-spacing: 0.01em; }
.tabular { font-variant-numeric: tabular-nums; }


html.dark {
  --neutral-0: #101018;
  --neutral-50: #141520;
  --neutral-100: #191b27;
  --neutral-200: #24273a;
  --neutral-300: #34384d;
  --neutral-400: #7a8098;
  --neutral-500: #979db2;
  --neutral-600: #bac0d3;
  --neutral-700: #d7dced;
  --neutral-800: #eef1f7;
  --neutral-900: #f8fafc;
  --neutral-950: #ffffff;
  --text: #eef1f7;
  --text-neutral-normal: #e8edf8;
  --text-neutral-prominent: #ffffff;
  --text-neutral-subtle: #c4cade;
  --text-neutral-muted: #98a1bb;
  --bg: #101018;
  --bg-secondary: #141520;
  --layer-neutral-subtle-default: #191b27;
  --layer-neutral-subtle-hover: #24273a;
  --layer-neutral-normal-default: #141520;
  --layer-neutral-normal-hover: #191b27;
  --border: #24273a;
  --border-neutral-normal: #24273a;
  --border-neutral-prominent: #4f5772;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.28);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.24);
  --shadow-md: 0 12px 34px rgba(0,0,0,.28);
  --shadow-popover: 0 20px 52px rgba(0,0,0,.36);
  color-scheme: dark;
}