/* ============================================================
   DESIGN TOKENS — EPSO Hub 2026
   ============================================================ */
:root {
  --clr-primary:       #273e57;
  --clr-primary-800:   #1a2940;
  --clr-primary-700:   #1f3550;
  --clr-primary-600:   #2a4966;
  --clr-primary-400:   #3d5a7a;
  --clr-primary-200:   #6b8ba8;
  --clr-primary-100:   #c5d4e3;
  --clr-primary-50:    #e8f0f7;

  --clr-gold:          #c6a354;
  --clr-gold-dark:     #a8853c;
  --clr-gold-light:    #d4b878;
  --clr-gold-50:       #fdf8ee;

  --clr-white:         #ffffff;
  --clr-bg:            #f5f7fa;
  --clr-bg-alt:        #eef1f6;
  --clr-surface:       #ffffff;

  --clr-text:          #1a2c42;
  --clr-text-muted:    #4a5a73;
  --clr-text-subtle:   #8fa0b5;
  --clr-text-on-dark:  #e8edf4;

  --clr-border:        #dde3ec;
  --clr-border-light:  #edf0f5;

  --clr-success:       #16a34a;
  --clr-success-bg:    #f0fdf4;
  --clr-warning:       #d97706;
  --clr-warning-bg:    #fffbeb;
  --clr-error:         #dc2626;
  --clr-error-bg:      #fef2f2;

  --gradient-primary:  linear-gradient(135deg, #273e57 0%, #1a2940 100%);
  --gradient-gold:     linear-gradient(135deg, #c6a354 0%, #a8853c 100%);
  --gradient-hero:     linear-gradient(150deg, #1a2636 0%, #273e57 50%, #2e4668 100%);

  --font-display:   'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-body:      'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

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

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  --shadow-xs:      0 1px 2px rgba(40,60,89,0.06);
  --shadow-sm:      0 2px 8px rgba(40,60,89,0.08);
  --shadow-md:      0 4px 20px rgba(40,60,89,0.10), 0 2px 6px rgba(40,60,89,0.06);
  --shadow-lg:      0 8px 40px rgba(40,60,89,0.12), 0 4px 12px rgba(40,60,89,0.06);
  --shadow-xl:      0 20px 60px rgba(40,60,89,0.15), 0 8px 20px rgba(40,60,89,0.08);
  --shadow-gold:    0 4px 24px rgba(198,163,84,0.28);
  --shadow-primary: 0 4px 24px rgba(40,60,89,0.28);

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34,1.56,0.64,1);

  --ease-standard:    cubic-bezier(0.22,1,0.36,1);
  --ease-emphasized:  cubic-bezier(0.16,1,0.3,1);
  --motion-fast:      150ms var(--ease-standard);
  --motion-base:      250ms var(--ease-standard);
  --motion-reveal:    600ms var(--ease-emphasized);

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --header-height: 68px;

  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* Admin shell semantic tokens */
  --adm-bg: var(--clr-bg);
  --adm-bg-alt: var(--clr-bg-alt);
  --adm-surface: var(--clr-surface);
  --adm-surface-soft: color-mix(in srgb, var(--clr-bg) 72%, var(--clr-white));
  --adm-surface-strong: var(--clr-white);
  --adm-ink: var(--clr-text);
  --adm-ink-strong: var(--clr-primary-800);
  --adm-muted: var(--clr-text-muted);
  --adm-subtle: var(--clr-text-subtle);
  --adm-border: var(--clr-border);
  --adm-border-soft: var(--clr-border-light);
  --adm-primary: var(--clr-primary);
  --adm-primary-strong: var(--clr-primary-800);
  --adm-primary-soft: var(--clr-primary-50);
  --adm-gold: var(--clr-gold);
  --adm-gold-soft: var(--clr-gold-50);
  --adm-success: var(--clr-success);
  --adm-success-soft: var(--clr-success-bg);
  --adm-warning: var(--clr-warning);
  --adm-warning-soft: var(--clr-warning-bg);
  --adm-error: var(--clr-error);
  --adm-error-soft: var(--clr-error-bg);
  --adm-info: var(--clr-primary-600);
  --adm-info-soft: var(--clr-primary-50);
  --adm-radius: var(--radius-sm);
  --adm-radius-lg: var(--radius-md);
  --adm-focus: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 18%, transparent);
  --adm-shadow: 0 1px 2px color-mix(in srgb, var(--clr-primary) 8%, transparent);
  --adm-shadow-raised: 0 12px 34px color-mix(in srgb, var(--clr-primary) 13%, transparent);
  --adm-shell-bg: #0f1f33;
  --adm-shell-bg-strong: #0a1727;
  --adm-shell-ink: #e8edf4;
  --adm-shell-muted: #9eb0c6;
  --adm-shell-border: rgba(232,237,244,0.13);
  --adm-dashboard-bg: #eef3f8;
  --adm-chart-blue: #2f6fed;
  --adm-chart-sky: #22a7f0;
  --adm-chart-gold: #c6a354;
  --adm-chart-green: #16a34a;
  --adm-chart-red: #dc2626;
  --adm-chart-purple: #7c5cff;
  --adm-chart-grid: rgba(31,53,80,0.11);
  --adm-chart-axis: rgba(74,90,115,0.62);
}