/**
 * ==============================================================================
 * CENTRO DIGITAL CONTINENTAL — FUNCIONAL DESIGN TOKENS
 * File: css/design-tokens.css
 * Standard: Public Functional CSS Custom Properties & Typography Fallbacks
 * ==============================================================================
 */

/* ==============================================================================
   1. REGISTRO TIPOGRÁFICO Y DESACTIVACIÓN DE SÍNTESIS ARTIFICIAL
   ============================================================================== */
@font-face {
  font-family: 'Neue Plak';
  src: url('../assets/fonts/Neue Plak Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neu Plak';
  src: url('../assets/fonts/Neue Plak Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Desactivar síntesis artificial de negritas para evitar glifos deformados */
body, html, *, button, input, select, textarea {
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

:root {
  /* ============================================================================
     2. PALETA INSTITUCIONAL OFICIAL (BRANDBOOK 2025)
     ============================================================================ */
  --uc-purple: #5A00AA;       /* Morado UC Principal — Pantone 267 C */
  --uc-lilac: #9169FF;        /* Lila UC — Pantone 2655 C */
  --uc-sky: #B9E1FF;          /* Celeste UC Oficial — Pantone 304 C */
  --uc-pink: #FAAAFA;         /* Rosado UC Oficial — Pantone 182 C */
  --uc-black: #000000;        /* Negro UC */
  --uc-white: #FFFFFF;        /* Blanco UC */

  /* ============================================================================
     3. PALETA DIGITAL COMPLEMENTARIA (CENTRO DIGITAL)
     ============================================================================ */
  --cdc-cyan-digital: #00C8FF;  /* Cian Digital Intenso */
  --cdc-pink-digital: #FF0066;  /* Rosado Digital Intenso */
  --cdc-tech-purple: #180B30;   /* Morado Tech Eventos */
  --cdc-obsidian: #0B0B10;      /* Negro Obsidiana */
  --cdc-surface-light: #F8FAFC; /* Gris Claro Superficie */

  /* ============================================================================
     4. TOKENS SEMÁNTICOS DE APLICACIÓN
     ============================================================================ */
  --color-primary: var(--uc-purple);
  --color-background: var(--uc-white);
  --color-surface: var(--uc-white);
  --color-text: #111827;
  --color-text-inverse: var(--uc-white);
  --color-border: #E5E7EB;

  --color-focus-light: var(--uc-purple);
  --color-focus-dark: var(--cdc-cyan-digital);

  /* ============================================================================
     5. TOKENS TIPOGRÁFICOS Y UTILIDADES DE PESO
     ============================================================================ */
  --font-body: "Neue Plak", "Neu Plak", "Inter", sans-serif;
  --font-emphasis: "Inter", "Poppins", sans-serif;
  --font-display: "Inter", "Poppins", sans-serif;
}

/* Clases de Utilidad Tipográfica para Componentes Prioritarios */
.font-body-uc {
  font-family: var(--font-body);
  font-weight: 400;
}

.font-emphasis-uc {
  font-family: var(--font-emphasis);
  font-weight: 700;
}

.font-display-uc {
  font-family: var(--font-display);
  font-weight: 900;
}