/*
 * ESSE Portal — Design Tokens
 * Single source of truth for all CSS variables
 * Generated: 2026-04-07
 * DO NOT define --esse-* variables anywhere else
 */

:root {

  /* ── Brand Colors ─────────────────────────────── */
  --esse-brand:           #2F6FED;   /* primary blue — buttons, links, accents */
  --esse-brand-hover:     #2560D4;   /* primary blue hover state */
  --esse-brand-dark:      #1D4ED8;   /* primary blue active/pressed */
  --esse-brand-light:     #EEF4FF;   /* primary blue background tint */
  --esse-brand-2:         #5B8DEF;   /* secondary blue — gradients */

  /* ── Text Colors ──────────────────────────────── */
  --esse-text:            #1F2937;   /* primary text */
  --esse-text-heading:    #111827;   /* headings */
  --esse-text-muted:      #6B7280;   /* secondary text */
  --esse-text-faint:      #9CA3AF;   /* tertiary text, placeholders */
  --esse-text-inverse:    #FFFFFF;   /* text on dark backgrounds */

  /* ── Background Colors ────────────────────────── */
  --esse-bg:              #F7F9FC;   /* page background */
  --esse-bg-alt:          #F3F4F6;   /* alternate background, hover states */
  --esse-panel:           #FFFFFF;   /* cards, panels */
  --esse-dark-bg:         #0F172A;   /* admin dark sidebar background */

  /* ── Border & Divider ─────────────────────────── */
  --esse-border:          #E5E7EB;   /* standard borders */
  --esse-border-focus:    #2F6FED;   /* input focus border */

  /* ── Semantic Colors ──────────────────────────── */
  --esse-success:         #16A34A;
  --esse-success-bg:      #F0FDF4;
  --esse-success-border:  #D1FAE5;

  --esse-danger:          #DC2626;
  --esse-danger-dark:     #B91C1C;
  --esse-danger-bg:       #FEF2F2;
  --esse-danger-border:   #FECACA;

  --esse-warning:         #D97706;
  --esse-warning-bg:      #FEF3C7;
  --esse-warning-border:  #FDE68A;

  --esse-info:            #2F6FED;
  --esse-info-bg:         #EEF4FF;

  /* ── Typography ───────────────────────────────── */
  --esse-font:            'Inter', system-ui, -apple-system, sans-serif;

  --esse-text-xs:         10px;   /* labels, uppercase tags */
  --esse-text-sm:         12px;   /* secondary, captions */
  --esse-text-base:       13px;   /* body, nav links */
  --esse-text-md:         14px;   /* form labels, card content */
  --esse-text-lg:         15px;   /* button text, emphasized body */
  --esse-text-xl:         18px;   /* section headings */
  --esse-text-2xl:        22px;   /* page titles */
  --esse-text-3xl:        24px;   /* main headings */

  /* ── Spacing Scale (8px base) ─────────────────── */
  --esse-space-1:          4px;
  --esse-space-2:          8px;
  --esse-space-3:         12px;
  --esse-space-4:         16px;
  --esse-space-5:         20px;
  --esse-space-6:         24px;
  --esse-space-8:         32px;
  --esse-space-10:        40px;
  --esse-space-12:        48px;
  --esse-space-16:        64px;

  /* ── Border Radius ────────────────────────────── */
  --esse-radius-sm:        6px;
  --esse-radius-md:        8px;
  --esse-radius-lg:       10px;
  --esse-radius-xl:       14px;
  --esse-radius-2xl:      16px;
  --esse-radius-full:    999px;

  /* ── Shadows ──────────────────────────────────── */
  --esse-shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --esse-shadow-md:   0 4px 12px rgba(0,0,0,0.10);
  --esse-shadow-lg:   0 10px 30px rgba(0,0,0,0.12);
  --esse-shadow-focus: 0 0 0 3px rgba(47,111,237,0.15);

  /* ── Z-Index Scale ────────────────────────────── */
  --esse-z-base:       0;
  --esse-z-above:     10;
  --esse-z-dropdown: 100;
  --esse-z-sidebar:  200;
  --esse-z-modal:    300;
  --esse-z-toast:    400;
  --esse-z-overlay:  500;

  /* ── Sidebar Dimensions ───────────────────────── */
  --esse-sidebar-width:       260px;
  --esse-sidebar-width-admin: 240px;
  --esse-topbar-height:        60px;

  /* ── Transitions ──────────────────────────────── */
  --esse-transition:      all 0.18s ease;
  --esse-transition-fast: all 0.10s ease;
}