/* ═══════════════════════════════════════════════════════════════════════════
   EUDS CORE — CONSTITUTIONAL DESIGN TOKENS
   ETHRAEON Universal Design System v3.2
   ═══════════════════════════════════════════════════════════════════════════
   
   HUMANITAS ANTE MACHINAM — Humanity Before the Machine
   © 2025 S. Jason Prohaska (ingombrante©) — All Rights Reserved
   Schedule A+ Enhanced IP Firewall Protected
   
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══════════════════════════════════════════════════════════════
     PRIMARY PALETTE — Constitutional Depth
     These colors represent the foundation of trust and stability
     ═══════════════════════════════════════════════════════════════ */
  --euds-midnight: #0a0a0f;
  --euds-obsidian: #1a1a2e;
  --euds-slate: #2d2d44;
  --euds-storm: #4a4a6a;
  --euds-mist: #6a6a8a;
  --euds-cloud: #8a8aaa;

  /* ═══════════════════════════════════════════════════════════════
     ACCENT PALETTE — Constitutional Action
     These colors signal interactivity, importance, and progress
     ═══════════════════════════════════════════════════════════════ */
  --euds-electric: #00d4ff;
  --euds-electric-dim: rgba(0, 212, 255, 0.6);
  --euds-electric-glow: rgba(0, 212, 255, 0.15);
  --euds-cyan: #00ffff;
  --euds-gold: #ffd700;
  --euds-gold-dim: rgba(255, 215, 0, 0.6);
  --euds-gold-glow: rgba(255, 215, 0, 0.15);
  --euds-warm-gold: #f4a460;
  --euds-violet: #8b5cf6;
  --euds-violet-dim: rgba(139, 92, 246, 0.6);
  --euds-rose: #ff007f;
  --euds-teal: #008080;
  --euds-emerald: #50c878;
  --euds-amber: #ffbf00;

  /* ═══════════════════════════════════════════════════════════════
     SEMANTIC PALETTE — Status & Feedback
     Constitutional states mapped to human understanding
     ═══════════════════════════════════════════════════════════════ */
  --euds-success: #00ff88;
  --euds-success-dim: rgba(0, 255, 136, 0.6);
  --euds-success-bg: rgba(0, 255, 136, 0.1);
  --euds-warning: #ffaa00;
  --euds-warning-dim: rgba(255, 170, 0, 0.6);
  --euds-warning-bg: rgba(255, 170, 0, 0.1);
  --euds-error: #ff4466;
  --euds-error-dim: rgba(255, 68, 102, 0.6);
  --euds-error-bg: rgba(255, 68, 102, 0.1);
  --euds-info: #4488ff;
  --euds-info-dim: rgba(68, 136, 255, 0.6);
  --euds-info-bg: rgba(68, 136, 255, 0.1);

  /* ═══════════════════════════════════════════════════════════════
     TEXT HIERARCHY — Constitutional Communication
     Clear visual hierarchy preserves human comprehension
     ═══════════════════════════════════════════════════════════════ */
  --text-primary: #f5f5f7;
  --text-secondary: rgba(245, 245, 247, 0.7);
  --text-tertiary: rgba(245, 245, 247, 0.5);
  --text-muted: rgba(245, 245, 247, 0.35);
  --text-disabled: rgba(245, 245, 247, 0.2);
  --text-inverse: #0a0a0f;

  /* ═══════════════════════════════════════════════════════════════
     TYPOGRAPHY — Constitutional Voice
     Inter: Clarity | JetBrains Mono: Precision | Crimson: Narrative
     ═══════════════════════════════════════════════════════════════ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type Scale — Modular (1.25 ratio) */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.5rem;     /* 72px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ═══════════════════════════════════════════════════════════════
     SPACING — Constitutional Rhythm
     8px base grid for harmonic composition
     ═══════════════════════════════════════════════════════════════ */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-9: 2.25rem;     /* 36px */
  --space-10: 2.5rem;     /* 40px */
  --space-11: 2.75rem;    /* 44px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-28: 7rem;       /* 112px */
  --space-32: 8rem;       /* 128px */
  --space-36: 9rem;       /* 144px */
  --space-40: 10rem;      /* 160px */

  /* ═══════════════════════════════════════════════════════════════
     GLASS MORPHISM — Constitutional Transparency
     Trust through visibility while maintaining depth
     ═══════════════════════════════════════════════════════════════ */
  --glass-bg: rgba(26, 26, 46, 0.7);
  --glass-bg-light: rgba(26, 26, 46, 0.5);
  --glass-bg-medium: rgba(26, 26, 46, 0.65);
  --glass-bg-strong: rgba(26, 26, 46, 0.85);
  --glass-bg-hover: rgba(45, 45, 68, 0.8);
  --glass-blur: blur(20px);
  --glass-blur-light: blur(12px);
  --glass-blur-strong: blur(30px);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(0, 212, 255, 0.25);
  --glass-border-gold: rgba(255, 215, 0, 0.2);

  /* ═══════════════════════════════════════════════════════════════
     BORDERS & RADII — Constitutional Boundaries
     Soft boundaries that contain without constraining
     ═══════════════════════════════════════════════════════════════ */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-base: 0.375rem; /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-3xl: 2rem;     /* 32px */
  --radius-full: 9999px;

  --border-thin: 1px solid var(--glass-border);
  --border-medium: 2px solid var(--glass-border);
  --border-accent: 1px solid var(--euds-electric);
  --border-gold: 1px solid var(--euds-gold-dim);

  /* ═══════════════════════════════════════════════════════════════
     SHADOWS — Constitutional Depth
     Layered depth creates natural visual hierarchy
     ═══════════════════════════════════════════════════════════════ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.35);
  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.4);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  
  /* Glow Shadows */
  --shadow-glow: 0 0 20px var(--euds-electric-glow);
  --shadow-glow-strong: 0 0 40px var(--euds-electric-glow);
  --shadow-gold-glow: 0 0 20px var(--euds-gold-glow);
  --shadow-success-glow: 0 0 20px rgba(0, 255, 136, 0.2);
  --shadow-error-glow: 0 0 20px rgba(255, 68, 102, 0.2);

  /* ═══════════════════════════════════════════════════════════════
     TRANSITIONS — Constitutional Flow
     Smooth transitions preserve cognitive continuity
     ═══════════════════════════════════════════════════════════════ */
  --transition-fastest: 75ms ease;
  --transition-faster: 100ms ease;
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 400ms ease;
  --transition-slowest: 500ms ease;

  /* Easing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ═══════════════════════════════════════════════════════════════
     Z-INDEX SCALE — Constitutional Layering
     Clear stacking order prevents visual chaos
     ═══════════════════════════════════════════════════════════════ */
  --z-base: 0;
  --z-above: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal-backdrop: 500;
  --z-modal: 600;
  --z-popover: 700;
  --z-tooltip: 800;
  --z-notification: 900;
  --z-max: 9999;

  /* ═══════════════════════════════════════════════════════════════
     BREAKPOINTS — Constitutional Responsiveness
     Fluid adaptation across all device contexts
     ═══════════════════════════════════════════════════════════════ */
  --bp-xs: 320px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
  --bp-3xl: 1920px;

  /* Container Max Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-prose: 65ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — Constitutional Accessibility
   Respect user preferences for motion sensitivity
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fastest: 0ms;
    --transition-faster: 0ms;
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
    --transition-slower: 0ms;
    --transition-slowest: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIGH CONTRAST — Constitutional Accessibility
   Enhanced visibility for users who need it
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: high) {
  :root {
    --glass-bg: rgba(0, 0, 0, 0.95);
    --glass-border: rgba(255, 255, 255, 0.3);
    --text-secondary: rgba(245, 245, 247, 0.9);
    --text-tertiary: rgba(245, 245, 247, 0.8);
  }
}