/* =========================================================================
   Tokens de diseño — Adriana y Daniel · tema "Tango Dark"
   Fuente de verdad: documentacion/fase0/referencias/penpot/v2_fixed/tokens.fixed.json
   No editar valores a mano sin actualizar el JSON de Penpot.
   ========================================================================= */

/* ---- Fuentes self-host (fuentes variables, licencia OFL) ---- */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/PlayfairDisplay.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Italic.ttf") format("truetype");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color (Penpot Tango Dark) ---- */
  --color-tango-black: #0d050e;
  --color-deep-plum:   #2b193e;
  --color-card-black:  #171019;
  --color-wine:        #8d2d56;
  --color-mauve-rose:  #a3445d;
  --color-border-wine: #5a1c39;
  --color-cta-red:     #d53c3c;
  --color-soft-white:  #f4eef2;
  --color-pure-white:  #ffffff;
  --color-warm-gray:   #bfa9b8;

  /* ---- Alias semánticos ---- */
  --color-bg:         var(--color-tango-black);
  --color-bg-deep:    var(--color-deep-plum);
  --color-surface:    var(--color-card-black);
  --color-primary:    var(--color-cta-red);
  --color-accent:     var(--color-wine);
  --color-accent-2:   var(--color-mauve-rose);
  --color-border:     var(--color-border-wine);
  --color-text:       var(--color-pure-white);
  --color-text-soft:  var(--color-soft-white);
  --color-text-muted: var(--color-warm-gray);

  /* ---- Puente dossier (export PDF/EPK) ---- */
  --color-dossier-magenta: #9b2d5e;

  /* ---- Institucional CUT (tema claro) ---- */
  --color-cut-bg:      #ffffff;
  --color-cut-primary: #b04c75;
  --color-cut-navy:    #003354;
  --color-cut-text:    #1a1a1a;

  /* ---- Tipografía ---- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-quote:   "Cormorant Garamond", Georgia, serif;
  --font-ui:      Inter, Montserrat, Arial, sans-serif;

  /* ---- Espaciado (Penpot) ---- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-section-y: 96px;
  --space-container-x: 70px;
  --gap-card: 24px;

  /* ---- Radios (Penpot) ---- */
  --radius-button: 5px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  /* ---- Sombras (Penpot) ---- */
  --shadow-soft-card: 0 16px 40px rgba(13, 5, 14, 0.40);
  --shadow-hero-vignette: 0 24px 80px rgba(13, 5, 14, 0.80);

  /* ---- Degradados ---- */
  --gradient-hero: linear-gradient(135deg, #0d050e 0%, #171019 50%, #2b193e 100%);
  --gradient-cta: linear-gradient(180deg, #d53c3c 0%, #8d2d56 100%);
  --gradient-hero-overlay: linear-gradient(90deg, rgba(13,5,14,0.92) 0%, rgba(13,5,14,0.45) 60%, transparent 100%);

  /* ---- Layout ---- */
  --container-max: 1200px;
}