/* ============================================================
   STHENOS HUD DESIGN SYSTEM v1 — TOKENS
   S25.1 T1.1 — 15 mayo 2026
   NO modificar sin actualizar STHENOS_HUD_DESIGN_SYSTEM_v1.md
   ============================================================ */

:root {
  /* === PALETA SEMAFÓRICA (estados de métricas) === */
  --sthenos-info:        #00D9FF;
  --sthenos-success:     #4ADE80;
  --sthenos-warning:     #FFB020;
  --sthenos-critical:    #FF3B30;
  --sthenos-achievement: #FFD700;

  /* === BRAND IDENTIDAD === */
  --sthenos-primary:     #00BFFF;
  --sthenos-accent:      #C0C0C0;
  --sthenos-deep:        #0A0E27;
  --sthenos-marble:      #F5F2ED;
  --sthenos-gold:        #D4A848;
  --sthenos-gold-dark:   #8B6F2C;
  --sthenos-bronze:      #6B4F2C;
  --sthenos-blood:       #8B1A1F;

  /* === FONDOS DARK === */
  --bg-primary-dark:     #050810;
  --bg-secondary-dark:   #0F1525;
  --bg-card-dark:        #1A2235;
  --bg-elevated-dark:    #232C45;

  /* === FONDOS LIGHT === */
  --bg-primary-light:    #FAFAFA;
  --bg-secondary-light:  #EDF0F5;
  --bg-card-light:       #FFFFFF;
  --bg-elevated-light:   #F8F9FB;

  /* === TEXTO DARK === */
  --text-high:           rgba(255, 255, 255, 0.95);
  --text-mid:            rgba(255, 255, 255, 0.70);
  --text-low:            rgba(255, 255, 255, 0.45);
  --text-disabled:       rgba(255, 255, 255, 0.25);

  /* === TEXTO LIGHT === */
  --text-high-light:     #0A0E27;
  --text-mid-light:      rgba(10, 14, 39, 0.70);
  --text-low-light:      rgba(10, 14, 39, 0.45);

  /* === BORDES === */
  --border-subtle:       rgba(0, 217, 255, 0.15);
  --border-medium:       rgba(0, 217, 255, 0.30);
  --border-strong:       rgba(0, 217, 255, 0.50);

  /* === TIPOGRAFÍA === */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --type-display-xl:  clamp(2.5rem, 8vw, 4.5rem);
  --type-display-lg:  clamp(1.875rem, 6vw, 3rem);
  --type-display-md:  clamp(1.5rem, 4vw, 2.25rem);
  --type-display-sm:  clamp(1.25rem, 3vw, 1.75rem);
  --type-body-lg:     1.125rem;
  --type-body:        1rem;
  --type-body-sm:     0.875rem;
  --type-caption:     0.75rem;
  --type-micro:       0.625rem;

  --weight-thin:      300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* === ESPACIADO 4px BASE === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* === TOUCH TARGETS WCAG 2.5.5 === */
  --touch-min:         44px;
  --touch-comfortable: 48px;
  --touch-large:       56px;

  /* === CONTAINERS === */
  --container-max:  1200px;
  --content-max:    720px;
  --reading-max:    640px;

  /* === BORDER RADIUS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-card:     0 4px 12px rgba(0, 217, 255, 0.08);
  --shadow-elevated: 0 8px 24px rgba(0, 217, 255, 0.15);
  --shadow-hover:    0 12px 32px rgba(0, 217, 255, 0.25);
  --shadow-gold:     0 8px 24px rgba(255, 215, 0, 0.30);
  --shadow-blood:    0 8px 24px rgba(139, 26, 31, 0.40);

  /* === MOTION TOKENS === */
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-epic:    1500ms;

  --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-epic:       cubic-bezier(0.7, 0, 0.3, 1);
  --easing-bounce:     cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === Z-INDEX SCALE === */
  --z-base:     0;
  --z-elevated: 10;
  --z-overlay:  100;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-system:   9999;

  /* === SAFE AREAS iOS === */
  --safe-top:    env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left:   env(safe-area-inset-left);
  --safe-right:  env(safe-area-inset-right);
}

/* === TEMA DARK (default) === */
[data-theme="dark"], :root {
  --bg-base:        var(--bg-primary-dark);
  --bg-surface:     var(--bg-secondary-dark);
  --bg-card:        var(--bg-card-dark);
  --bg-elevated:    var(--bg-elevated-dark);
  --text-primary:   var(--text-high);
  --text-secondary: var(--text-mid);
  --text-tertiary:  var(--text-low);
}

/* === TEMA LIGHT (marble) === */
[data-theme="light"] {
  --bg-base:        var(--bg-primary-light);
  --bg-surface:     var(--bg-secondary-light);
  --bg-card:        var(--bg-card-light);
  --bg-elevated:    var(--bg-elevated-light);
  --text-primary:   var(--text-high-light);
  --text-secondary: var(--text-mid-light);
  --text-tertiary:  var(--text-low-light);

  --shadow-card:     0 4px 12px rgba(10, 14, 39, 0.08);
  --shadow-elevated: 0 8px 24px rgba(10, 14, 39, 0.15);
  --shadow-hover:    0 12px 32px rgba(10, 14, 39, 0.25);
}

/* === REDUCED MOTION (accesibilidad) === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   ATLANTIS THEME v3 — TOKENS ADITIVOS
   S25.1 T1.3 — 16 mayo 2026
   Paleta mediterránea luminosa (visión Opus 4.7)
   NO reemplaza tokens existentes — es ADITIVO
   ============================================================ */

:root {
  /* === PALETA ATLÁNTIDA === */
  --atlantis-marble:        #FAFAF7;
  --atlantis-marble-veined: #F2EFE8;
  --atlantis-obsidiana:     #1A1F2C;
  --atlantis-turquesa:      #4FB8B0;
  --atlantis-orichalcum:    #C9A862;
  --atlantis-imperial:      #B91C1C;
  --atlantis-emerald:       #059669;

  /* Derivados Atlántida */
  --atlantis-marble-card:   #FFFFFF;
  --atlantis-marble-border: rgba(201, 168, 98, 0.20);
  --atlantis-marble-border-bright: rgba(201, 168, 98, 0.45);
  --atlantis-turquesa-dim:  rgba(79, 184, 176, 0.15);
  --atlantis-obsidiana-mid: rgba(26, 31, 44, 0.65);
  --atlantis-obsidiana-low: rgba(26, 31, 44, 0.40);

  /* === TIPOGRAFÍA v3 ATLÁNTIDA === */
  --font-display-v3: 'Cinzel', 'Times New Roman', serif;
  --font-body-v3:    'Montserrat', 'Inter', -apple-system, sans-serif;
  --font-data-v3:    'JetBrains Mono', 'Courier New', monospace;
}

/* === THEME ATLANTIS (mediterráneo luminoso) === */
[data-theme="atlantis"] {
  --bg-base:        var(--atlantis-marble);
  --bg-surface:     var(--atlantis-marble-veined);
  --bg-card:        var(--atlantis-marble-card);
  --bg-elevated:    #FFFFFF;
  --text-primary:   var(--atlantis-obsidiana);
  --text-secondary: var(--atlantis-obsidiana-mid);
  --text-tertiary:  var(--atlantis-obsidiana-low);

  /* Sobreescribe bordes para atlantis */
  --border-subtle:  rgba(201, 168, 98, 0.12);
  --border-medium:  rgba(201, 168, 98, 0.25);
  --border-strong:  rgba(201, 168, 98, 0.45);

  /* Sobreescribe sombras para atlantis */
  --shadow-card:     0 2px 8px rgba(26, 31, 44, 0.06);
  --shadow-elevated: 0 4px 16px rgba(26, 31, 44, 0.10);
  --shadow-hover:    0 8px 24px rgba(26, 31, 44, 0.15);
  --shadow-gold:     0 4px 16px rgba(201, 168, 98, 0.25);
}