/* FINEDU · Colores y tipografía para la web · versión final · octubre de 2026 */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&family=DM+Sans:wght@400;500;700&display=swap");

:root {
  /* Escalas */
  --navy-50: #F0F3F9;
  --navy-100: #DEE5F2;
  --navy-200: #BBCBE8;
  --navy-300: #8AA7DB;
  --navy-400: #537FD0;
  --navy-500: #2F5FD0;
  --navy-600: #1C4797;
  --navy-700: #0D3681;
  --navy-800: #0B2D6B;
  --navy-900: #071D45;

  --cobre-50: #FAF4EF;
  --cobre-100: #F5E7DC;
  --cobre-200: #EBD2BC;
  --cobre-300: #E0B795;
  --cobre-400: #DD9658;
  --cobre-500: #C47A3A;
  --cobre-600: #965520;
  --cobre-700: #7A4318;
  --cobre-800: #5C3214;
  --cobre-900: #3E220E;

  --neutro-50: #F9F8F5;
  --neutro-100: #F3F1EC;
  --neutro-200: #E3E0D9;
  --neutro-300: #BCB9B1;
  --neutro-400: #A29D95;
  --neutro-500: #8A857C;
  --neutro-600: #6D6962;
  --neutro-700: #4F4D48;
  --neutro-800: #32312E;
  --neutro-900: #121212;

  --perla-50: #F5F6F8;
  --perla-100: #E4E7EB;
  --perla-200: #CDD3DB;
  --perla-300: #A9B2BF;

  /* Estados */
  --exito: #2E7D5B;
  --exito-bg: #E3F1EA;
  --aviso: #9A6410;
  --aviso-bg: #FBF0DC;
  --error: #B3261E;
  --error-bg: #F9E3E1;
  --info: #1C4797;
  --info-bg: #F0F3F9;

  /* Tokens de uso (modo claro) */
  --color-bg: #F3F1EC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #E3E0D9;
  --color-surface-data: #E4E7EB;
  --color-text: #121212;
  --color-text-muted: #4F4D48;
  --color-border: #BCB9B1;
  --color-primary: #0B2D6B;
  --color-primary-hover: #071D45;
  --color-on-primary: #F3F1EC;
  --color-accent: #C47A3A;
  --color-accent-hover: #965520;
  --color-on-accent: #121212;
  --color-accent-text: #965520;
  --color-link: #2F5FD0;
  --color-link-hover: #0D3681;
  --color-interactive: #2F5FD0;
  --color-focus: #2F5FD0;
  --color-chart-1: #0B2D6B;
  --color-chart-2: #2F5FD0;
  --color-chart-3: #C47A3A;
  --color-chart-4: #A29D95;

  /* Tipografía */
  --font-titulos: "Outfit", system-ui, sans-serif;
  --font-texto: "DM Sans", system-ui, sans-serif;
}

/* Modo oscuro (opcional) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-surface: #1C1C1B;
    --color-surface-alt: #26251F;
    --color-surface-data: #071D45;
    --color-text: #F3F1EC;
    --color-text-muted: #BCB9B1;
    --color-border: #33322E;
    --color-primary: #8AA7DB;
    --color-primary-hover: #BBCBE8;
    --color-on-primary: #121212;
    --color-accent: #DD9658;
    --color-accent-hover: #E0B795;
    --color-on-accent: #121212;
    --color-accent-text: #E0B795;
    --color-link: #8AA7DB;
    --color-link-hover: #BBCBE8;
    --color-interactive: #8AA7DB;
    --color-focus: #8AA7DB;
    --color-chart-1: #BBCBE8;
    --color-chart-2: #537FD0;
    --color-chart-3: #DD9658;
    --color-chart-4: #8A857C;
  }
}