/* ===================================================================
   GLYXI — DESIGN TOKENS
   Punto único para colores, tipografías y espaciados.
   Cambia aquí y se actualiza todo el sitio.
   =================================================================== */

:root {
  /* ── Paleta de marca: negro / dorado / blanco ── */
  --c-black:        #0a0a0a;
  --c-black-soft:   #141414;
  --c-black-700:    #1d1d1d;
  --c-white:        #ffffff;
  --c-offwhite:     #f7f5f0;
  --c-gray:         #b8b8b8;
  --c-gray-dark:    #6c6c6c;

  /* Dorado (varios tonos + degradado tipo el del logo) */
  --c-gold:         #c9a24b;
  --c-gold-light:   #e8cd84;
  --c-gold-dark:    #a37e2c;
  --gold-gradient:  linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
  --gold-gradient-soft: linear-gradient(135deg, #d4af6a, #f3e4ad, #b38728);

  /* ── Roles semánticos ── */
  --bg:             var(--c-black);
  --bg-alt:         var(--c-black-soft);
  --bg-light:       var(--c-offwhite);
  --text:           var(--c-offwhite);
  --text-muted:     var(--c-gray);
  --text-on-light:  var(--c-black);
  --accent:         var(--c-gold);
  --border:         rgba(201, 162, 75, 0.22);

  /* ── Tipografía ── */
  --font-display: 'Cinzel', 'Times New Roman', serif;   /* títulos, estilo del logo */
  --font-body:    'Montserrat', 'Segoe UI', sans-serif; /* cuerpo y etiquetas */
  --font-mono:    'Consolas', 'SF Mono', 'Courier New', monospace; /* mockups de código */

  --fs-hero:   clamp(1.9rem, 4vw, 3.2rem);
  --fs-h1:     clamp(2rem, 4.5vw, 3.4rem);
  --fs-h2:     clamp(1.6rem, 3.4vw, 2.6rem);
  --fs-h3:     clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.15;
  --lh-base:  1.7;

  /* ── Espaciado y layout ── */
  --container:    1200px;
  --gutter:       clamp(1.2rem, 4vw, 2.5rem);
  --section-pad:  clamp(3.5rem, 8vw, 7rem);
  --radius:       14px;
  --radius-sm:    8px;

  /* ── Efectos ── */
  --shadow:       0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-gold:  0 10px 40px rgba(201, 162, 75, 0.18);
  --transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}