/**
 * ETHRAEON AUTHENTIC UI TOKENS
 * Extracted from actual UI screenshots and working demos
 * This is the TRUE Ethraeon aesthetic — cosmic, constitutional, sovereign
 *
 * Last updated: 2025-11-24
 * Version: 1.0 (AUTHENTIC)
 */

:root {
  /* ============================================
   * PRIMARY PALETTE — Domain Colors
   * ============================================ */

  /* CONSTITUTION / PARALLAX / GENTHOS */
  --ethraeon-magenta: #f35cff;
  --ethraeon-magenta-bright: #ff7fff;
  --ethraeon-magenta-dim: #d940e6;

  /* MIND / KAIROS / LUMENA / CHOIR */
  --ethraeon-cyan: #7ad6ff;
  --ethraeon-cyan-bright: #9ee5ff;
  --ethraeon-cyan-dim: #5bc4f0;

  /* APP / PRAXIS */
  --ethraeon-orange: #ffb46a;
  --ethraeon-orange-bright: #ffc88a;
  --ethraeon-orange-dim: #ff9f4a;

  /* OS / TRINITY / SOVRIN */
  --ethraeon-purple: #a4a4ff;
  --ethraeon-purple-bright: #c0c0ff;
  --ethraeon-purple-dim: #8888e6;

  /* GOVERNANCE */
  --ethraeon-violet: #b47fff;

  /* ENTERPRISE */
  --ethraeon-blue: #6a9fff;

  /* CONSCIOUSNESS / MYTHOS */
  --ethraeon-pink: #ff7aa4;


  /* ============================================
   * BACKGROUNDS — Deep Space Aesthetic
   * ============================================ */

  --ethraeon-void: #030208;           /* Primary background */
  --ethraeon-surface: #0a0a14;        /* Elevated surfaces */
  --ethraeon-elevated: #12121c;       /* Cards, panels */
  --ethraeon-panel: #1a1a28;          /* Bright panels */

  /* Radial gradient backgrounds (for hero sections) */
  --ethraeon-gradient-cosmic: radial-gradient(
    circle at top,
    rgba(243, 92, 255, 0.08) 0%,
    rgba(122, 214, 255, 0.04) 40%,
    rgba(3, 2, 8, 1) 70%
  );

  --ethraeon-gradient-deep: radial-gradient(
    circle at center,
    rgba(10, 10, 20, 1) 0%,
    rgba(3, 2, 8, 1) 100%
  );


  /* ============================================
   * TEXT — Hierarchy
   * ============================================ */

  --ethraeon-text-primary: #e5e5f0;
  --ethraeon-text-secondary: #b8b8c8;
  --ethraeon-text-tertiary: #8888a0;
  --ethraeon-text-quaternary: #606070;

  /* Gradient text (for special headings) */
  --ethraeon-text-gradient-magenta-cyan: linear-gradient(
    135deg,
    var(--ethraeon-magenta) 0%,
    var(--ethraeon-cyan) 100%
  );


  /* ============================================
   * BORDERS
   * ============================================ */

  --ethraeon-border-subtle: rgba(255, 255, 255, 0.06);
  --ethraeon-border-default: rgba(255, 255, 255, 0.12);
  --ethraeon-border-strong: rgba(255, 255, 255, 0.20);
  --ethraeon-border-emphasis: rgba(255, 255, 255, 0.32);


  /* ============================================
   * TYPOGRAPHY
   * ============================================ */

  /* Font families */
  --ethraeon-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ethraeon-font-mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, monospace;

  /* Font sizes */
  --ethraeon-text-xs: 10px;
  --ethraeon-text-sm: 12px;
  --ethraeon-text-base: 14px;
  --ethraeon-text-lg: 16px;
  --ethraeon-text-xl: 20px;
  --ethraeon-text-2xl: 24px;
  --ethraeon-text-3xl: 32px;
  --ethraeon-text-4xl: 40px;
  --ethraeon-text-5xl: 48px;

  /* Letter spacing (signature Ethraeon wide tracking) */
  --ethraeon-tracking-normal: 0;
  --ethraeon-tracking-wide: 0.08em;
  --ethraeon-tracking-wider: 0.12em;
  --ethraeon-tracking-widest: 0.18em;

  /* Line heights */
  --ethraeon-leading-tight: 1.2;
  --ethraeon-leading-normal: 1.5;
  --ethraeon-leading-relaxed: 1.7;

  /* Font weights */
  --ethraeon-weight-normal: 400;
  --ethraeon-weight-medium: 500;
  --ethraeon-weight-semibold: 600;
  --ethraeon-weight-bold: 700;


  /* ============================================
   * SPACING — 8px Grid System
   * ============================================ */

  --ethraeon-space-1: 4px;
  --ethraeon-space-2: 8px;
  --ethraeon-space-3: 12px;
  --ethraeon-space-4: 16px;
  --ethraeon-space-5: 24px;
  --ethraeon-space-6: 32px;
  --ethraeon-space-7: 40px;
  --ethraeon-space-8: 48px;
  --ethraeon-space-9: 64px;
  --ethraeon-space-10: 80px;


  /* ============================================
   * BORDER RADIUS
   * ============================================ */

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


  /* ============================================
   * EFFECTS — Glow, Blur, Shadows
   * ============================================ */

  /* Glow effects (signature Ethraeon) */
  --ethraeon-glow-magenta: 0 0 16px rgba(243, 92, 255, 0.4);
  --ethraeon-glow-magenta-strong: 0 0 24px rgba(243, 92, 255, 0.6);
  --ethraeon-glow-cyan: 0 0 16px rgba(122, 214, 255, 0.4);
  --ethraeon-glow-cyan-strong: 0 0 24px rgba(122, 214, 255, 0.6);
  --ethraeon-glow-orange: 0 0 16px rgba(255, 180, 106, 0.4);
  --ethraeon-glow-purple: 0 0 16px rgba(164, 164, 255, 0.4);
  --ethraeon-glow-subtle: 0 0 12px rgba(255, 255, 255, 0.1);

  /* Text shadows (for glowing text) */
  --ethraeon-text-glow-magenta: 0 0 12px rgba(243, 92, 255, 0.5);
  --ethraeon-text-glow-cyan: 0 0 12px rgba(122, 214, 255, 0.5);

  /* Glass morphism */
  --ethraeon-blur-sm: blur(8px);
  --ethraeon-blur-md: blur(16px);
  --ethraeon-blur-lg: blur(24px);
  --ethraeon-blur-xl: blur(32px);

  --ethraeon-glass-surface: rgba(10, 10, 20, 0.6);
  --ethraeon-glass-elevated: rgba(18, 18, 28, 0.7);

  /* Standard shadows */
  --ethraeon-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --ethraeon-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --ethraeon-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);


  /* ============================================
   * OPACITY LEVELS
   * ============================================ */

  --ethraeon-opacity-glass: 0.6;
  --ethraeon-opacity-overlay: 0.8;
  --ethraeon-opacity-disabled: 0.4;
  --ethraeon-opacity-hover: 0.7;


  /* ============================================
   * TRANSITIONS
   * ============================================ */

  --ethraeon-transition-fast: 150ms ease-out;
  --ethraeon-transition-base: 250ms ease-out;
  --ethraeon-transition-slow: 400ms ease-out;


  /* ============================================
   * Z-INDEX LAYERS
   * ============================================ */

  --ethraeon-z-base: 0;
  --ethraeon-z-dropdown: 100;
  --ethraeon-z-sticky: 200;
  --ethraeon-z-modal-backdrop: 900;
  --ethraeon-z-modal: 1000;
  --ethraeon-z-toast: 1100;


  /* ============================================
   * COMPONENT-SPECIFIC TOKENS
   * ============================================ */

  /* Topbar */
  --ethraeon-topbar-height: 56px;
  --ethraeon-topbar-bg: rgba(10, 10, 20, 0.9);
  --ethraeon-topbar-border: var(--ethraeon-border-default);

  /* Sidebar */
  --ethraeon-sidebar-width: 280px;
  --ethraeon-sidebar-bg: var(--ethraeon-surface);

  /* Orb/Dot sizes */
  --ethraeon-orb-sm: 8px;
  --ethraeon-orb-md: 12px;
  --ethraeon-orb-lg: 16px;

  /* Pill button */
  --ethraeon-pill-padding-x: 16px;
  --ethraeon-pill-padding-y: 8px;
  --ethraeon-pill-radius: 16px;

  /* Panel */
  --ethraeon-panel-bg: var(--ethraeon-elevated);
  --ethraeon-panel-border: var(--ethraeon-border-default);
  --ethraeon-panel-padding: var(--ethraeon-space-5);
  --ethraeon-panel-radius: var(--ethraeon-radius-lg);
}


/* ============================================
 * UTILITY CLASSES — Pre-built
 * ============================================ */

.ethraeon-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--ethraeon-tracking-wider);
}

.ethraeon-gradient-text {
  background: var(--ethraeon-text-gradient-magenta-cyan);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ethraeon-glow-magenta {
  box-shadow: var(--ethraeon-glow-magenta);
}

.ethraeon-glow-cyan {
  box-shadow: var(--ethraeon-glow-cyan);
}

.ethraeon-glass {
  background: var(--ethraeon-glass-surface);
  backdrop-filter: var(--ethraeon-blur-md);
}

.ethraeon-cosmic-bg {
  background: var(--ethraeon-gradient-cosmic);
}


/* ============================================
 * DOMAIN COLOR CLASSES
 * ============================================ */

.domain-constitution { color: var(--ethraeon-magenta); }
.domain-mind { color: var(--ethraeon-cyan); }
.domain-os { color: var(--ethraeon-purple); }
.domain-app { color: var(--ethraeon-orange); }
.domain-governance { color: var(--ethraeon-violet); }
.domain-enterprise { color: var(--ethraeon-blue); }
.domain-consciousness { color: var(--ethraeon-pink); }


/* ============================================
 * RESET & BASE STYLES
 * ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--ethraeon-font-sans);
  font-size: var(--ethraeon-text-base);
  line-height: var(--ethraeon-leading-normal);
  color: var(--ethraeon-text-primary);
  background: var(--ethraeon-void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--ethraeon-weight-semibold);
  line-height: var(--ethraeon-leading-tight);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}