/**
 * Calera Labs Shared Design System Tokens
 * Unified CSS Custom Properties across all subdomains: portfolio, finsec, icx, math, dashboard.
 * Theme: Prestige Institutional Light (Bloomberg / Renaissance Technologies / DeepMind grade)
 */

:root {
  /* Color Palette — Prestige Porcelain & Sovereign Navy */
  --fs-bg: #f8fafc;
  --fs-bg-elevated: #ffffff;
  --fs-bg-subtle: #f1f5f9;
  --fs-border: #e2e8f0;
  --fs-border-hover: #94a3b8;
  --fs-steel: #334155;
  --fs-text: #0a192f;
  --fs-text-body: #1e293b;
  --fs-text-muted: #64748b;
  --fs-accent: #0a192f;
  --fs-accent-cobalt: #1e40af;
  --fs-brand: #0a192f;
  --fs-verified: #047857;
  --fs-refusal: #b45309;
  --fs-danger: #b91c1c;
  --fs-tentative: #475569;

  /* Typography */
  --fs-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-display: var(--fs-font-display);
  --font-ui: var(--fs-font-ui);
  --font-mono: var(--fs-font-mono);

  /* Spacing (4px grid) */
  --fs-space-1: 0.25rem;
  --fs-space-2: 0.5rem;
  --fs-space-3: 0.75rem;
  --fs-space-4: 1.0rem;
  --fs-space-5: 1.5rem;
  --fs-space-6: 2.0rem;
  --fs-space-7: 3.0rem;
  --fs-space-8: 4.0rem;

  /* Border Radii — Architectural, Crisp Precision */
  --fs-radius-sm: 4px;
  --fs-radius-md: 8px;
  --fs-radius-lg: 12px;
  --radius-sm: var(--fs-radius-sm);
  --radius-md: var(--fs-radius-md);
  --radius-lg: var(--fs-radius-lg);
  --radius-xl: 16px;

  /* Shadows & Elevation — Multi-Tier Ambient Precision */
  --fs-shadow-1: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --card-shadow: var(--shadow-md);

  /* Shared Surface Aliases */
  --bg-color: var(--fs-bg);
  --bg-deep: var(--fs-bg-subtle);
  --bg-surface: var(--fs-bg-elevated);
  --bg-card: var(--fs-bg-elevated);
  --bg-card-hover: #f8fafc;
  --border-color: var(--fs-border);
  --border-color-hover: var(--fs-border-hover);
  --text-primary: var(--fs-text-body);
  --text-secondary: #334155;
  --text-muted: var(--fs-text-muted);
  --text-heading: var(--fs-text);
  --accent-solid: #0a192f;
  --accent-cobalt: #1e40af;
  --accent-emerald: #047857;
  --glass-bg: rgba(255, 255, 255, 0.94);
  --glass-border: var(--fs-border);
  --surface-elevated: var(--fs-bg-elevated);
  --surface-inset: #f1f5f9;
  --surface-deep: #e2e8f0;
  --nav-bg: rgba(248, 250, 252, 0.94);

  /* Code Wells */
  --code-bg: #0a192f;
  --code-text: #e2e8f0;
  --code-border: #1e293b;

  /* Motion */
  --fs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fs-dur-fast: 150ms;
  --fs-dur-med: 250ms;
  --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light dark;
}

html[data-theme="light"]:not([data-theme="dark"]),
body[data-theme="light"]:not([data-theme="dark"]),
:root[data-theme="light"]:not([data-theme="dark"]) {
  --fs-bg: #f8fafc;
  --fs-bg-elevated: #ffffff;
  --fs-bg-subtle: #f1f5f9;
  --fs-border: #e2e8f0;
  --fs-border-hover: #94a3b8;
  --fs-steel: #334155;
  --fs-text: #0a192f;
  --fs-text-body: #1e293b;
  --fs-text-muted: #64748b;
  --fs-accent: #0a192f;
  --fs-accent-cobalt: #1e40af;
  --fs-brand: #0a192f;
  --fs-verified: #047857;
  --fs-refusal: #b45309;
  --fs-danger: #b91c1c;
  --fs-tentative: #475569;
  --fs-shadow-1: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);

  --bg-color: #f8fafc;
  --bg-deep: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --border-color: #e2e8f0;
  --border-color-hover: #94a3b8;
  --text-primary: #1e293b;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-heading: #0a192f;
  --glass-bg: rgba(255, 255, 255, 0.94);
  --glass-border: #e2e8f0;
  --surface-elevated: #ffffff;
  --surface-inset: #f1f5f9;
  --nav-bg: rgba(248, 250, 252, 0.94);

  color-scheme: light;
}

[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
:root[data-theme="dark"],
.dark {
  --fs-bg: #090e17;       /* Rich Deep Obsidian */
  --fs-bg-elevated: #111827; /* Dark Slate-900 */
  --fs-bg-subtle: #0f172a;
  --fs-border: #1f293d;   /* Razor sharp dark border */
  --fs-border-hover: #374151;
  --fs-steel: #94a3b8;
  --fs-text: #f8fafc;     /* High contrast white */
  --fs-text-body: #e2e8f0;
  --fs-text-muted: #a1afc5;
  --fs-accent: #38bdf8;
  --fs-accent-cobalt: #60a5fa;
  --fs-brand: #10b981;
  --fs-verified: #10b981;
  --fs-refusal: #f59e0b;
  --fs-danger: #ef4444;
  --fs-tentative: #64748b;
  --fs-shadow-1: 0 4px 20px rgba(0, 0, 0, 0.5);

  --bg-color: #090e17;
  --bg-deep: #05080f;
  --bg-surface: #111827;
  --bg-card: #111827;
  --bg-card-hover: #172033;
  --border-color: #1f293d;
  --border-color-hover: #374151;
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #a1afc5;
  --text-heading: #ffffff;
  --accent-solid: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.15);
  --accent-ink: #38bdf8;
  --glass-bg: rgba(17, 24, 39, 0.85);
  --glass-border: #1f293d;
  --nav-bg: rgba(9, 14, 23, 0.94);
  --surface-inset: rgba(255, 255, 255, 0.04);
  --surface-deep: #05080f;
  --surface-elevated: #111827;
  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

[data-theme="light"]:not([data-theme="dark"]) body,
html[data-theme="light"]:not([data-theme="dark"]) body,
body[data-theme="light"]:not([data-theme="dark"]),
.light:not(.dark):not([data-theme="dark"]) body,
body.light:not(.dark):not([data-theme="dark"]) {
  --bg-color: #f8fafc !important;
  --text-primary: #1e293b !important;
  background-color: #f8fafc !important;
  color: #1e293b !important;
}

[data-theme="dark"] body,
html[data-theme="dark"] body,
body[data-theme="dark"],
.dark body,
body.dark,
html.dark body {
  --bg-color: #090e17 !important;
  --text-primary: #f8fafc !important;
  background-color: #090e17 !important;
  color: #e2e8f0 !important;
}

/* Micro-Animations & Smooth Theme Transitions */
body, nav, header, .dash-header, .dash-sidebar, .dash-main, .card, .fs-job-card, button, input, select {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Universal Typography Heading Color Guarantee */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #0a192f;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #ffffff;
}

.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
  animation: none !important;
}