/* ============================================================
   TOKENS — Daniel López
   Paleta del sistema de marca aplicada a la interfaz: un solo acento
   (vermellón), sin neón ni degradados de color. El vidrio/glass del
   layout se mantiene; lo que cambia es qué color vive detrás de él.
   ============================================================ */
:root {
  --dl-bg:            #0d0b08;   /* fondo base: tinta de marca oscurecida, no negro puro */
  --dl-bg-elev:       #171310;   /* superficies elevadas */
  --dl-ink:           #F4F1EA;   /* texto principal — hueso de marca */
  --dl-ink-mute:      #a89f8f;   /* texto secundario, sobre --dl-bg cumple AA */
  --dl-accent:        #C2542A;   /* único acento — vermellón de marca */
  --dl-accent-soft:   #d97a52;   /* variante clara: texto en vermellón sobre fondo oscuro (4.3:1 con el acento puro no pasa AA a texto pequeño; con esta sí) */
  --dl-on-accent:     #000000;   /* texto sobre superficies rellenas de --dl-accent: --dl-bg da 4.30:1, negro puro da 4.60:1 */
  --dl-glass-bg:      rgba(244,241,234,0.05);
  --dl-glass-border:  rgba(244,241,234,0.14);
  --dl-glass-blur:    24px;

  /* Tipografía */
  --dl-font-display:  'Archivo', system-ui, sans-serif;
  --dl-font-body:     'Archivo', system-ui, sans-serif;
  --dl-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Derivados de layout (no son marca, son escala) */
  --dl-maxw:          1180px;
  --dl-gutter:        clamp(20px, 5vw, 48px);
  --dl-section-y:     clamp(72px, 11vw, 140px);
  --dl-radius:        20px;
  --dl-radius-lg:     32px;

  color-scheme: dark;

  /* --- Paleta de marca (referencia) — coincide 1:1 con --dl-* de arriba.
     Se mantiene con sus propios nombres porque los SVG de public/brand/
     usan estos hex directamente, no custom properties. */
  --brand-vermellon: #C2542A;
  --brand-tinta:     #16140F;
  --brand-hueso:     #F4F1EA;
  --brand-hairline:  #CDC6B6;
  --brand-mute:      #9A9282;
}

/* backdrop-filter compone una capa borrosa por elemento; en móvil, con
   varias tarjetas de vidrio en pantalla a la vez, ese costo se nota más
   que en escritorio. Un blur más chico se sigue leyendo como vidrio. */
@media (max-width: 767px) {
  :root { --dl-glass-blur: 12px; }
}