/* ═══════════════════════════════════════════════════════════════
   ACCESS DEFENDER PRO — DESIGN TOKENS v2
   Single source of truth. Every value references a token.
   No magic numbers anywhere.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand palette ── */
  --ms-bg-main:         #FFFFFF;
  --ms-bg-alt:          #E8F5E8;
  --ms-bg-neutral:      #D4D0C8;
  --ms-border:          #A8D8B8;
  --ms-border-dark:     #4A9E6E;

  --ms-text-primary:    #1A1A1A;
  --ms-text-secondary:  #2E7D5A;
  --ms-text-tertiary:   #848484;
  --ms-text-muted:      #848484;
  --ms-text-on-dark:    #FFFFFF;
  --ms-text-on-dark-80: rgba(255,255,255,0.85);

  --ms-brand:           #4A7FB5;
  --ms-brand-dark:      #1E5A9C;
  --ms-brand-deeper:    #163F7A;
  --ms-brand-light:     #D6E8F5;
  --ms-brand-tint:      #EBF4FB;

  --ms-error:           #CC3300;
  --ms-error-dark:      #A32700;
  --ms-error-light:     #FDECEA;
  --ms-warning:         #835B00;
  --ms-warning-light:   #FFF3CD;
  --ms-success:         #2E7D5A;
  --ms-success-light:   #E8F5E8;
  --ms-info:            #4A7FB5;
  --ms-info-light:      #D6E8F5;

  /* ── WD Green (brand identity) ── */
  --wd-green-1:         #3B8F62;
  --wd-green-2:         #2E7D5A;
  --wd-green-3:         #1E5C42;
  --wd-green-4:         #134030;
  --wd-green-5:         #4A9E6E;
  --wd-green-6:         #6DBF8A;
  --wd-green-light:     #A8D8B8;
  --wd-green-tint:      #E8F5E8;

  /* ── Sidebar ── */
  --sidebar-bg:         rgba(255,255,255,0.97);
  --sidebar-bg-hover:   #F3F2F1;
  --sidebar-bg-active:  #E8F5E8;
  --sidebar-border:     #E0E0E0;
  --sidebar-text:       #1A1A1A;
  --sidebar-text-muted: #2E7D5A;
  --sidebar-icon:       #2E7D5A;
  --sidebar-icon-active:#2E7D5A;
  --sidebar-active-indicator: #4A9E6E;
  --sidebar-active-text: #1A4A36;
  --sidebar-width:      220px;
  --sidebar-width-collapsed: 56px;

  /* ── Topbar ── */
  --topbar-bg:          rgba(255,255,255,0.97);
  --topbar-border:      #A8D8B8;
  --topbar-height:      48px;

  /* ── Page background ── */
  --ms-bg-page:         #F3F2F1;

  /* ═══════════════════════════════════════════════════════════
     SHADOW SYSTEM — 3 levels only
     XS: subtle card elevation
     SM: interactive hover / dropdown
     MD: modal / dialog
     ═══════════════════════════════════════════════════════════ */
  --shadow-xs: 0 1.6px 3.6px 0 rgba(0,0,0,0.08), 0 0.3px 0.9px 0 rgba(0,0,0,0.06);
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.10);

  /* Legacy shadow aliases (mapped to new system) */
  --ms-shadow-1: var(--shadow-xs);
  --ms-shadow-2: var(--shadow-sm);
  --ms-shadow-3: var(--shadow-md);

  /* ═══════════════════════════════════════════════════════════
     BORDER RADIUS SYSTEM — single value, consistently applied
     ═══════════════════════════════════════════════════════════ */
  --radius-sm:  4px;
  --radius-md:  4px;
  --radius-lg:  4px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Legacy radius alias */
  --ms-radius: var(--radius-sm);
  --ms-radius-lg: var(--radius-lg);

  /* ═══════════════════════════════════════════════════════════
     SPACING SCALE (4px base)
     ═══════════════════════════════════════════════════════════ */
  --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;
  --space-16: 64px;

  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY SYSTEM — Segoe UI only
     Allowed sizes: 12, 13, 14, 16, 20, 24
     No other font sizes anywhere in the application.
     ═══════════════════════════════════════════════════════════ */
  --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   12px;   /* Badges, captions, KPI labels */
  --text-sm:   13px;   /* Body, table cells, sidebar labels */
  --text-base: 14px;   /* Card titles, button text */
  --text-md:   16px;   /* Empty state titles, hero subtitle */
  --text-lg:   20px;   /* Section headers */
  --text-xl:   24px;   /* Page titles */

  /* Font weight tokens */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* Line height tokens */
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Legacy typography aliases (mapped to new system) */
  --font-size-xs:    var(--text-xs);
  --font-size-sm:    var(--text-sm);
  --font-size-base:  var(--text-sm);
  --font-size-md:    var(--text-base);
  --font-size-lg:    var(--text-md);
  --font-size-xl:    var(--text-lg);
  --font-size-2xl:   var(--text-xl);
  --font-size-3xl:   28px; /* kept for hero only */
  --font-weight-normal: var(--weight-normal);
  --font-weight-medium: var(--weight-medium);
  --font-weight-semi:   var(--weight-semibold);
  --font-weight-semibold: var(--weight-semibold);
  --line-height-tight:   var(--leading-tight);
  --line-height-base:    var(--leading-normal);
  --line-height-relaxed: var(--leading-relaxed);

  /* ═══════════════════════════════════════════════════════════
     TRANSITIONS — Fluent motion
     ═══════════════════════════════════════════════════════════ */
  --transition-fast:   all 0.10s ease;
  --transition-base:   all 0.15s ease;
  --transition-slow:   all 0.20s ease;
  --transition-modal:  all 0.25s ease;
  --sidebar-collapse-speed: 200ms;

  /* ═══════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════ */
  --z-content:    1;
  --z-dropdown:   100;
  --z-topbar:     200;
  --z-sidebar:    250;
  --z-overlay:    400;
  --z-modal:      500;
  --z-toast:      9999;

  /* ═══════════════════════════════════════════════════════════
     FOCUS RING — consistent across all interactive elements
     ═══════════════════════════════════════════════════════════ */
  --focus-ring-width: 2px;
  --focus-ring-color: #4A7FB5;
  --focus-ring-offset: 1px;

  /* ═══════════════════════════════════════════════════════════
     ICON SIZES
     ═══════════════════════════════════════════════════════════ */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;

  /* ── Sidebar icon (all identical, pixel-perfect) ── */
  --sidebar-icon-size: 16px;
}