/* ==========================================================================
   DESIGN TOKENS — Miguel Bedoya Portfolio
   Paleta Monocromática de Lujo (Dark Titanium & Monochrome)
   Inspirado en estética Cyber-Editorial, Dithering Shaders y Minimalismo Oscuro
   Colores: #000000, #050507, #0D0D11, #16161C, #8E8E98, #B8B8C2, #FFFFFF
   Tipografía: Syncopate / Michroma (Wide), Akkurat Mono (14px), Plus Jakarta Sans
   ========================================================================== */

:root {
  /* ---- Paleta Oscura Monocromática Pura (Sin Rojo) ---- */
  --c-black:            #000000;              /* Negro absoluto */
  --bg-void:            #040405;              /* Fondo de vacío espacial */
  --bg-surface:         rgba(20, 20, 25, 0.65);/* Superficie de cristal ahumado oscuro */
  --bg-surface-elevated:rgba(30, 30, 38, 0.82);/* Tarjetas con elevación */
  --bg-surface-hover:   rgba(45, 45, 56, 0.92);/* Hover de tarjetas */

  /* ---- Acentos de Luz Plateada & Blanco Neón ---- */
  --c-white:            #FFFFFF;              /* Blanco puro de alto contraste */
  --c-silver-hi:        #E2E2EA;              /* Titanio claro brillante */
  --c-silver-mid:       #A8A8B4;              /* Plata neutra para lectura óptima */
  --c-silver-low:       #5C5C68;              /* Micro-textos y captions */
  --c-charcoal:         #1E1E26;              /* Carbón neutro para elevación */

  /* ---- Bordes de Precisión Metálica ---- */
  --border-hair:        rgba(255, 255, 255, 0.09);
  --border-lit:         rgba(255, 255, 255, 0.28);
  --border-focus:       rgba(255, 255, 255, 0.7);

  /* ---- Resplandor y Sombras Monocromáticas ---- */
  --glow-white:         0 0 20px rgba(255, 255, 255, 0.25);
  --glow-white-lg:      0 0 45px rgba(255, 255, 255, 0.2);
  --shadow-card:        0 15px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.03);
  --shadow-card-hover:  0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 255, 255, 0.1);

  /* ---- Textos de Alto Contraste & Legibilidad ---- */
  --text-hi:            #FFFFFF;
  --text-mid:           #DFE0EB;              /* Gris platino de alta legibilidad */
  --text-low:           #A2A4B8;              /* Micro-detalles legibles */

  /* ---- Tipografía ---- */
  --font-wide:          'Syncopate', 'Michroma', 'Unbounded', sans-serif;
  --font-display:       'Unbounded', 'Syncopate', sans-serif;
  --font-mono:          'JetBrains Mono', 'Space Mono', 'Courier New', monospace;
  --font-body:          'Plus Jakarta Sans', -apple-system, sans-serif;

  /* ---- Escala Tipográfica Fluida ---- */
  --fs-hero:            clamp(2.5rem, 6.5vw, 5.8rem);
  --fs-h1:              clamp(2rem, 4.5vw, 3.6rem);
  --fs-h2:              clamp(1.5rem, 3vw, 2.2rem);
  --fs-h3:              clamp(1.15rem, 2vw, 1.5rem);
  --fs-body:            1rem;
  --fs-small:           0.875rem;
  --fs-mono:            14px;                 /* Akkurat Mono oficial: 14px */
  --fs-tag:             0.75rem;

  /* ---- Espaciado ---- */
  --space-1:            0.5rem;
  --space-2:            1rem;
  --space-3:            1.5rem;
  --space-4:            2.5rem;
  --space-5:            4rem;
  --space-6:            6rem;
  --space-7:            9rem;

  /* ---- Geometría Orgánica / No Cuadrada ---- */
  --radius-sm:          12px;
  --radius-md:          20px;
  --radius-lg:          32px;
  --radius-xl:          44px;
  --radius-pill:        9999px;

  /* ---- Layout ---- */
  --max-w:              1280px;
  --nav-h:              76px;

  /* ---- Velocidad de Respuesta Extrema (<= 0.22s) ---- */
  --ease-quick:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:           0.22s;
  --dur-med:            0.3s;
}