/* Hermid — Design Tokens
 * Paleta dark + oro brillante. Tipografía Spectral + Plex Sans + Plex Mono.
 * Estas variables son la única fuente de verdad de identidad visual.
 */

:root {
  /* ─── Color: ink (fondo) ─── */
  --ink:        #0E0B07;   /* negro cálido principal */
  --ink-2:      #161108;   /* fondo de secciones alternas / cards */
  --ink-3:      #1E1610;   /* card sobre card */

  /* ─── Color: paper (texto) ─── */
  --paper:      #E8DFCB;   /* texto principal: crema editorial */
  --paper-dim:  #C9BFA9;   /* texto secundario */
  --paper-mute: #8A7F66;   /* texto terciario / metadata */

  /* ─── Color: gold (brand) ─── */
  --gold:        #D4AF37;  /* oro 18k vivo: acento principal */
  --gold-bright: #F0CC4D;  /* highlight / hover */
  --gold-soft:   #A88726;  /* sombras / variante apagada */
  --gold-deep:   #7E641E;  /* sombra de gradient metálico */

  /* ─── Color: rules (bordes) ─── */
  --rule:        #2A2620;
  --rule-soft:   #1C1814;

  /* ─── Color: estados ─── */
  --positive:    #6E8B4D;  /* verde olivo */
  --negative:    #8C2522;  /* lacre */

  /* ─── Typography ─── */
  --font-display: 'Spectral', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Menlo', monospace;

  /* ─── Spacing scale ─── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* Layout padding lateral (full-bleed, escala con viewport) */
  --pad-x: clamp(24px, 5vw, 80px);
  --pad-y: clamp(96px, 12vw, 160px);

  /* ─── Motion ─── */
  --ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast:    220ms;
  --t-medium:  320ms;
  --t-slow:    600ms;
  --t-reveal:  1100ms;

  /* ─── Gradients ─── */
  --grad-gold:      linear-gradient(135deg, #C9A030 0%, #F5D453 40%, #E8C547 60%, #C9A030 100%);
  --grad-gold-text: linear-gradient(180deg, #F0CC4D 0%, #D4AF37 60%, #A88726 100%);

  /* ─── Shadows ─── */
  --shadow-card:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-card-hover:
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 16px 36px rgba(212, 175, 55, 0.12);

  --shadow-btn:
    0 0 0 0.5px rgba(240, 204, 77, 0.5),
    0 0 24px rgba(212, 175, 55, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 238, 170, 0.55) inset,
    0 -1px 0 rgba(120, 90, 20, 0.4) inset;

  --shadow-btn-hover:
    0 0 0 0.5px rgba(245, 212, 83, 0.8),
    0 0 48px rgba(212, 175, 55, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 238, 170, 0.7) inset,
    0 -1px 0 rgba(120, 90, 20, 0.4) inset;
}