/* ════════════════════════════════════════════════════════════════
   modern-root.css — Verse Media
   Fusiona Verse 2.0 (legacy) + Verse 3.0 (semántico, ex design-tokens.css).
   Organizado por tema: cada bloque tiene su versión LEGACY y su versión
   SEMÁNTICA una al lado de la otra. Donde el nombre se repite, la
   definición SEMÁNTICA (declarada después) es la que gana la cascada.
   Un solo :root — el orden interno es el mismo que antes, así que nada
   cambia de valor. No se eliminó ninguna declaración al reorganizar.
   ════════════════════════════════════════════════════════════════ */

/* ── RESET ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
   font-family: inherit;
}

:root {
   /* ════════════════════════════════════════════════════════════
       COLOR — Legacy (Verse 2.0)
       ════════════════════════════════════════════════════════════ */
   --primary: #f59e0b;
   --primary-rgb: 239, 165, 5;
   --primary-glow: rgba(var(--primary-rgb), 0.4);
   --crimson: #671921;

   --bg-card: #111111;
   --bg-card-hover: #181818;
   --bg-header: #070707;

   --border: rgba(var(--primary-rgb), 0.12);
   --border-bright: rgba(var(--primary-rgb), 0.28);

   --text-pure: #f7f7f7;
   --text-main: #dcdcdc;
   --text-secondary: #888888;
   --text-secondary: #888888;
   --text-light: #ffffff;

   /* ── COLOR — Semántico (Verse 3.0) ──────────────────────────── */
   /* Superficie */
   --surface-0: #080705;
   /* body bg — con pattern */
   --surface-1: #0f0e0b;
   /* página base */
   --surface-2: #151410;
   /* cards */
   --surface-3: #1c1b16;
   /* cards hover / elevated */
   --surface-4: #232218;
   /* inputs, select */

   /* ════════════════════════════════════════════════════════════
       REFLEJOS Y HIGHLIGHTS (Verse 3.0 Addon)
       ════════════════════════════════════════════════════════════ */
   --reflection-1-background: radial-gradient(circle at 10% 20%, var(--pc-divider) 0%, var(--bg-header) 40%), radial-gradient(circle at 90% 80%, var(--surface-2) 0%, var(--surface-1) 50%);
   /* Reflejos estáticos en bordes superiores */
   --reflection-top-subtle: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
   --reflection-top-gold: linear-gradient(180deg, rgba(var(--primary-rgb), 0.22) 0%, rgba(var(--primary-rgb), 0) 100%);

   /* Reflejo metálico en diagonal (Efecto Glass/Titanio) */
   --reflection-glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 60%);
   --reflection: linear-gradient(2deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 40%, var(--surface-1) 60%);
   --reflection-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 40%, var(--surface-1) 60%);
   --reflec: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 40%, var(--surface-1) 60%);


   /* Halo / Resplandor interno */
   --reflection-inner-glow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.15),
      inset 0 0 12px rgba(var(--primary-rgb), 0.1);


   /* Bordes */
   --border-subtle: rgba(239, 165, 5, 0.08);
   --border-default: rgba(239, 165, 5, 0.15);
   --border-strong: rgba(239, 165, 5, 0.35);
   --border-focus: rgba(239, 165, 5, 0.7);

   /* Texto */
   --text-1: #f5f0e8;
   /* primario — cálido, no frío */
   --text-2: #c8bfa8;
   /* secundario */
   --text-3: #857a6a;
   /* muted */
   --text-4: #554e42;
   /* disabled */

   /* Acento — Gold */


   --primary-glow: rgba(239, 165, 5, 0.25);
   --primary-bg: rgba(239, 165, 5, 0.06);

   /* Funcional */
   --success: #0f420b;
   --error: #760b0b;
   --info: #08290b;

   /* ── COLOR — Overrides de compatibilidad (legacy → semántico) ── */

   --border: rgba(var(--primary-rgb), 0.12);
   --border-bright: rgba(239, 165, 5, 0.35);
   --text-pure: var(--text-1);
   --text-main: var(--text-2);
   --text-secondary: #888888;

   /* ════════════════════════════════════════════════════════════
       TIPOGRAFÍA
       ════════════════════════════════════════════════════════════ */
   --font-display: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-mono: ui-monospace, Consolas, Menlo, monospace;

   /* Escala modular 1.25 (Major Third) sobre base 15px */
   --text-2xs: 0.64rem;
   /* 9.6px  — etiquetas pequeñas */
   --text-xs: 0.8rem;
   /* 12px   — metadata */
   --text-sm: 0.9rem;
   /* 13.5px — UI secundaria */
   --text-base: 1rem;
   /* 15px   — cuerpo */
   --text-lg: 1.2rem;
   /* 18px   — cuerpo destacado */
   --text-xl: 1.44rem;
   /* 21.6px — subheadings */
   --text-2xl: 1.728rem;
   /* 25.9px — section headers */
   --text-3xl: 2.074rem;
   /* 31.1px — page titles */
   --text-4xl: 2.488rem;
   /* 37.3px — hero titles */

   /* Line heights */
   --leading-tight: 1.1;
   --leading-snug: 1.3;
   --leading-normal: 1.5;
   --leading-relaxed: 1.65;

   /* Letter spacing */
   --tracking-tight: -0.02em;
   --tracking-normal: 0em;
   --tracking-wide: 0.04em;
   --tracking-wider: 0.08em;

   /* Font weights */
   --weight-regular: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
   --weight-bold: 700;
   --weight-black: 800;

   /* ════════════════════════════════════════════════════════════
       ESPACIADO — Legacy (Verse 2.0)
       ════════════════════════════════════════════════════════════ */
   --p-5: 5px;
   --p-10: 10px;
   --p-15: 15px;
   --p-20: 20px;
   --p-25: 25px;
   --p-30: 30px;

   --m-5: 5px;
   --m-10: 10px;
   --m-15: 15px;
   --m-20: 20px;
   --m-25: 25px;
   --m-30: 30px;

   --gap-10: 10px;
   --gap-15: 15px;
   --gap-20: 20px;
   --gap-25: 25px;

   /*  Marguin  */

   --m-top-5: 5px;
   --m-top-10: 10px;
   --m-top-15: 15px;
   --m-top-20: 20px;

   --m-bottom-5: 5px;
   --m-bottom-10: 10px;
   --m-bottom-15: 15px;
   --m-bottom-20: 20px;

   --m-left-5: 5px;
   --m-left-10: 10px;
   --m-left-15: 15px;
   --m-left-20: 20px;

   --m-right-5: 5px;
   --m-right-10: 10px;
   --m-right-15: 15px;
   --m-right-20: 20px;

   /*  Padding  */

   --p-top-5: 5px;
   --p-top-10: 10px;
   --p-top-15: 15px;
   --p-top-20: 20px;

   --p-bottom-5: 5px;
   --p-bottom-10: 10px;
   --p-bottom-15: 15px;
   --p-bottom-20: 20px;

   --p-left-5: 5px;
   --p-left-10: 10px;
   --p-left-15: 15px;
   --p-left-20: 20px;
   --p-right-5: 5px;
   --p-right-10: 10px;
   --p-right-15: 15px;
   --p-right-20: 20px;

   /* ── ESPACIADO — Semántico (Verse 3.0, base 4px) ────────────── */
   --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;
   --space-20: 80px;

   /* ════════════════════════════════════════════════════════════
       BORDER RADIUS — Legacy (Verse 2.0)
       ════════════════════════════════════════════════════════════ */
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 15px;
   --radius-xl: 20px;
   --radius-full: 9999px;

   /* ── RADIUS — Semántico (Verse 3.0, gana por orden de cascada) ── */
   --radius-xs: 3px;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-2xl: 24px;
   --radius-full: 9999px;

   /* ════════════════════════════════════════════════════════════
       SOMBRAS Y EFECTOS — Legacy (Verse 2.0)
       ════════════════════════════════════════════════════════════ */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.5);
   --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.75);
   --shadow-gold: 0 0 18px var(--primary-glow);

   --blur-main: blur(10px);
   --blur-heavy: blur(20px);

   /* ── SOMBRAS — Semántico (Verse 3.0, "elevation") ───────────── */
   --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4);
   --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.5);
   --elevation-3: 0 8px 28px rgba(0, 0, 0, 0.65);
   --elevation-4: 0 20px 60px rgba(0, 0, 0, 0.8);
   --elevation-gold: 0 0 0 1px var(--border-focus),
      0 4px 20px var(--primary-glow);

   /* ════════════════════════════════════════════════════════════
       TRANSICIONES Y MOTION — Legacy (Verse 2.0)
       ════════════════════════════════════════════════════════════ */
   --transition-fast: 0.2s ease;
   --transition-main: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 0.5s ease;

   /* ── MOTION — Semántico (Verse 3.0, spring-aware) ───────────── */
   /* Duraciones */
   --duration-instant: 80ms;
   --duration-fast: 150ms;
   --duration-normal: 220ms;
   --duration-slow: 350ms;
   --duration-gentle: 500ms;

   /* Easings */
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   /* Material-style */
   --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1);
   /* Decelerate */
   --ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1);
   /* Accelerate */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   /* Spring con overshoot */
   --ease-spring-md: cubic-bezier(0.25, 1.45, 0.5, 1);
   /* Spring suave */
   --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

   /* ── MOTION — Overrides de compatibilidad (legacy → semántico) ── */
   --transition-fast: var(--duration-fast) var(--ease-standard);
   --transition-main: var(--duration-normal) var(--ease-standard);


}

/* ════════════════════════════════════════════════════════════════
   VARIANTES CONDICIONALES — quedan aparte del :root de arriba a
   propósito: solo se aplican bajo esa media query, fusionarlas
   rompería el comportamiento condicional.
   ════════════════════════════════════════════════════════════════ */

/* ── Light mode — preparado pero no activo ───────────────────────── */
@media (prefers-color-scheme: light) {
   :root[data-theme="auto"] {
      --surface-0: #fafaf8;
      --surface-1: #f5f4f0;
      --surface-2: #edece6;
      --surface-3: #e4e3da;
      --surface-4: #d9d8ce;
      --text-1: #1a1810;
      --text-2: #4a4438;
      --text-3: #7a7060;
      --text-4: #aaa090;
   }
}

/* ── Accesibilidad — reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
   :root {
      --duration-instant: 0ms;
      --duration-fast: 0ms;
      --duration-normal: 0ms;
      --duration-slow: 0ms;
      --duration-gentle: 0ms;
      --ease-spring: linear;
      --ease-spring-md: linear;
   }
}