/* ============================================================
   ALTIANA — Design Tokens
   Fuente única de verdad para colores y tipografías.
   Importar este archivo PRIMERO en cualquier CSS que lo use.
   ============================================================ */

/* --- Fuentes --- */
@font-face {
  font-family: 'Kanit';
  src: url('../fonts/Kanit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kanit';
  src: url('../fonts/Kanit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens globales (modo claro por defecto) --- */
:root {
  /* Paleta Altiana */
  --color-primary:        #04002D;   /* Azul Profundo */
  --color-accent:         #E61E79;   /* Fucsia */
  --color-accent-hover:   #c4155f;   /* Fucsia oscuro para hover */
  --color-sky:            #C7F8F9;   /* Azul Cielo */
  --color-klein:          #1F2FC6;   /* Azul Klein */
  --color-black:          #1A1A1A;
  --color-gray:           #B2B2B2;
  --color-gray-light:     #F5F5F5;
  --color-white:          #FFFFFF;

  /* Gradiente Altiana */
  --gradient-altiana: linear-gradient(135deg, #04002D 0%, #E61E79 50%, #1F2FC6 100%);
  --gradient-card:    linear-gradient(135deg, #1F2FC6, #04002D);

  /* Semánticos — tema claro */
  --bg-surface:       #FFFFFF;
  --bg-page:          #F5F5F5;
  --text-primary:     #04002D;
  --text-secondary:   #B2B2B2;
  --text-on-accent:   #FFFFFF;
  --border-color:     #E0E0E0;

  /* Tipografía */
  --font-heading: 'Kanit', sans-serif;
  --font-body:    'Gilroy', 'Segoe UI', sans-serif;

  /* Sombras */
  --shadow-card: 0 4px 12px rgba(4, 0, 45, 0.12);
  --shadow-hover: 0 8px 24px rgba(4, 0, 45, 0.2);

  /* Transiciones */
  --transition-base: 0.3s ease-in-out;
}

/* --- Tema oscuro --- */
[data-theme="dark"],
.dark {
  --bg-surface:     #04002D;
  --bg-page:        #02001a;
  --text-primary:   #FFFFFF;
  --text-secondary: #B2B2B2;
  --border-color:   #1F2FC6;
}

/* --- Utilidades globales --- */
.text-accent    { color: var(--color-accent); }
.text-primary-b { color: var(--color-primary); }
.bg-primary     { background-color: var(--color-primary); }
.bg-accent      { background-color: var(--color-accent); }
.gradient-bg    { background: var(--gradient-altiana); }