/**
 * digitleysystem — Enterprise Design System Tokens
 * =================================================
 * COPY THIS FILE to apply the full visual language anywhere.
 * All modules must use these CSS variables — never hardcode colors.
 *
 * Modes: light (default) · dark · high-contrast
 * Spacing: 8px grid
 */

/* ─── LIGHT MODE (default) ─────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Brand — Digitley indigo (form CTAs / accents) */
  --erp-brand: #635bff;
  --erp-brand-hover: #5249e6;
  --erp-brand-pressed: #4338ca;
  --erp-brand-subtle: #eef2ff;
  --erp-brand-muted: #c7d2fe;
  --erp-brand-fg: #FFFFFF;

  /* Secondary */
  --erp-secondary: #0E7490;
  --erp-secondary-subtle: #E0F7FA;

  /* Neutrals 50–950 */
  --erp-gray-50: #F8FAFC;
  --erp-gray-100: #F1F5F9;
  --erp-gray-200: #E2E8F0;
  --erp-gray-300: #CBD5E1;
  --erp-gray-400: #94A3B8;
  --erp-gray-500: #64748B;
  --erp-gray-600: #475569;
  --erp-gray-700: #334155;
  --erp-gray-800: #1E293B;
  --erp-gray-900: #0F172A;
  --erp-gray-950: #020617;

  /* Semantic */
  --erp-success: #059669;
  --erp-success-subtle: #ECFDF5;
  --erp-success-fg: #065F46;
  --erp-warning: #D97706;
  --erp-warning-subtle: #FFFBEB;
  --erp-warning-fg: #92400E;
  --erp-danger: #DC2626;
  --erp-danger-subtle: #FEF2F2;
  --erp-danger-fg: #991B1B;
  --erp-info: #0284C7;
  --erp-info-subtle: #F0F9FF;
  --erp-info-fg: #075985;

  /* Surfaces & layers */
  --erp-bg: #fbfbfb;
  --erp-bg-elevated: #FFFFFF;
  --erp-surface: #FFFFFF;
  --erp-surface-2: #F8FAFC;
  --erp-surface-3: #F1F5F9;
  --erp-card: #FFFFFF;
  --erp-sidebar: #0B1220;
  --erp-sidebar-fg: #E2E8F0;
  --erp-sidebar-muted: #94A3B8;
  --erp-sidebar-active: rgba(99, 91, 255, 0.18);
  --erp-overlay: rgba(15, 23, 42, 0.48);

  /* Text */
  --erp-text: #0F172A;
  --erp-text-secondary: #475569;
  --erp-text-muted: #64748B;
  --erp-text-inverse: #FFFFFF;
  --erp-text-link: #635bff;

  /* Borders */
  --erp-border: #E2E8F0;
  --erp-border-strong: #CBD5E1;
  --erp-border-focus: #635bff;

  /* Shadows */
  --erp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --erp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --erp-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --erp-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  --erp-shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.16);
  --erp-shadow-focus: 0 0 0 3px rgba(11, 95, 255, 0.28);

  /* Typography */
  --erp-font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --erp-font-display: "Outfit", "Plus Jakarta Sans", sans-serif;
  --erp-font-mono: "JetBrains Mono", "Consolas", monospace;

  --erp-text-xs: 0.75rem;
  --erp-text-sm: 0.8125rem;
  --erp-text-base: 0.9375rem;
  --erp-text-md: 1rem;
  --erp-text-lg: 1.125rem;
  --erp-text-xl: 1.25rem;
  --erp-text-2xl: 1.5rem;
  --erp-text-3xl: 1.875rem;
  --erp-text-4xl: 2.25rem;
  --erp-text-5xl: 3rem;
  --erp-leading-tight: 1.25;
  --erp-leading-snug: 1.375;
  --erp-leading-normal: 1.5;
  --erp-leading-relaxed: 1.625;

  /* Spacing (8px grid) */
  --erp-space-0: 0;
  --erp-space-1: 4px;
  --erp-space-2: 8px;
  --erp-space-3: 12px;
  --erp-space-4: 16px;
  --erp-space-5: 20px;
  --erp-space-6: 24px;
  --erp-space-8: 32px;
  --erp-space-10: 40px;
  --erp-space-12: 48px;
  --erp-space-16: 64px;
  --erp-space-20: 80px;
  --erp-space-24: 96px;

  /* Radius */
  --erp-radius-sm: 6px;
  --erp-radius-md: 10px;
  --erp-radius-lg: 14px;
  --erp-radius-xl: 20px;
  --erp-radius-2xl: 28px;
  --erp-radius-full: 9999px;

  /* Motion */
  --erp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --erp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --erp-duration-fast: 120ms;
  --erp-duration: 220ms;
  --erp-duration-slow: 400ms;

  /* Layout */
  --erp-sidebar-width: 260px;
  --erp-sidebar-collapsed: 72px;
  --erp-topbar-height: 64px;
  --erp-content-max: 1440px;
  --erp-content-wide: 1920px;

  /* Login panel atmosphere */
  --erp-login-hero-from: #07101F;
  --erp-login-hero-via: #0B1B36;
  --erp-login-hero-to: #0A2A5C;
  --erp-login-accent: #3B82F6;
  --erp-login-glow: rgba(59, 130, 246, 0.35);
}

/* ─── DARK MODE ────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --erp-brand: #3B82F6;
  --erp-brand-hover: #60A5FA;
  --erp-brand-pressed: #2563EB;
  --erp-brand-subtle: #1E3A5F;
  --erp-brand-muted: #1E40AF;
  --erp-brand-fg: #FFFFFF;

  --erp-secondary: #22D3EE;
  --erp-secondary-subtle: #083344;

  --erp-gray-50: #020617;
  --erp-gray-100: #0F172A;
  --erp-gray-200: #1E293B;
  --erp-gray-300: #334155;
  --erp-gray-400: #475569;
  --erp-gray-500: #64748B;
  --erp-gray-600: #94A3B8;
  --erp-gray-700: #CBD5E1;
  --erp-gray-800: #E2E8F0;
  --erp-gray-900: #F1F5F9;
  --erp-gray-950: #F8FAFC;

  --erp-success: #34D399;
  --erp-success-subtle: #064E3B;
  --erp-success-fg: #A7F3D0;
  --erp-warning: #FBBF24;
  --erp-warning-subtle: #78350F;
  --erp-warning-fg: #FDE68A;
  --erp-danger: #F87171;
  --erp-danger-subtle: #7F1D1D;
  --erp-danger-fg: #FECACA;
  --erp-info: #38BDF8;
  --erp-info-subtle: #0C4A6E;
  --erp-info-fg: #BAE6FD;

  --erp-bg: #060B14;
  --erp-bg-elevated: #0B1220;
  --erp-surface: #0F172A;
  --erp-surface-2: #111827;
  --erp-surface-3: #1E293B;
  --erp-card: #0F172A;
  --erp-sidebar: #030712;
  --erp-sidebar-fg: #E2E8F0;
  --erp-sidebar-muted: #94A3B8;
  --erp-sidebar-active: rgba(59, 130, 246, 0.22);
  --erp-overlay: rgba(0, 0, 0, 0.64);

  --erp-text: #F1F5F9;
  --erp-text-secondary: #CBD5E1;
  --erp-text-muted: #94A3B8;
  --erp-text-inverse: #0F172A;
  --erp-text-link: #60A5FA;

  --erp-border: #1E293B;
  --erp-border-strong: #334155;
  --erp-border-focus: #3B82F6;

  --erp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --erp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --erp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --erp-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --erp-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --erp-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.4);

  --erp-login-hero-from: #020617;
  --erp-login-hero-via: #0B1220;
  --erp-login-hero-to: #0F1C3A;
  --erp-login-accent: #60A5FA;
  --erp-login-glow: rgba(96, 165, 250, 0.28);
}

/* ─── HIGH CONTRAST ────────────────────────────────────────────────── */
[data-theme="high-contrast"] {
  --erp-brand: #0050E0;
  --erp-brand-hover: #003BB0;
  --erp-brand-subtle: #D6E4FF;
  --erp-text: #000000;
  --erp-text-secondary: #1A1A1A;
  --erp-text-muted: #333333;
  --erp-bg: #FFFFFF;
  --erp-surface: #FFFFFF;
  --erp-card: #FFFFFF;
  --erp-border: #000000;
  --erp-border-strong: #000000;
  --erp-border-focus: #000000;
  --erp-shadow-focus: 0 0 0 3px #000000;
  --erp-success: #006B3F;
  --erp-danger: #B00000;
  --erp-warning: #8A5A00;
}

/* ─── REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --erp-duration-fast: 0ms;
    --erp-duration: 0ms;
    --erp-duration-slow: 0ms;
  }
}

/* ─── BASE RESET HELPERS (safe to include globally) ────────────────── */
.erp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}