/**
 * @file
 * Color palette for Barrio Red Aprende theme.
 * Paleta completa de Colombia Aprende
 * Prefijo: --ra- (Red Aprende)
 */

:root {
  /* ====================================
     COLORES PRINCIPALES
     ==================================== */

  /* Base - Blanco y Negro */
  --ra-color-black: #000000;
  --ra-color-white: #FFFFFF;

  /* Principales - Uso en Header y Acciones */
  --ra-color-cobalt: #0943B5;
  --ra-color-matterhorn: #4C4C4C;

  /* ====================================
     PALETA DE AZULES
     ==================================== */
  --ra-color-havelock-blue: #4672C8;
  --ra-color-tropical-blue: #B5C7E9;
  --ra-color-blue-dark: #004884;
  --ra-color-portage: #83A0DA;

  /* ====================================
     PALETA DE MARRONES Y DORADOS
     ==================================== */
  --ra-color-golden-brown: #9D7700;
  --ra-color-sunglow: #FECC2F;
  --ra-color-gold: #FFAB00;
  --ra-color-vis-vis: #FEE697;

  /* ====================================
     PALETA DE GRISES Y NEUTROS
     ==================================== */
  --ra-color-white-smoke: #F4F4F4;
  --ra-color-silver: #B9B9B9;
  --ra-color-grey: #7E7E7E;
  --ra-color-solitude: #E5ECF8;
  --ra-color-ghost-white: #F3F7FD;
  --ra-color-corn-silk: #FFFAE8;
  --ra-color-beige-calido: #DCD5D0;

  /* Neutros Oscuros */
  --ra-color-neutral-dark: #444444;
  --ra-color-neutral-darker: #222222;
  --ra-color-neutral-darkest: #111111;

  /* ====================================
     PALETA DE COLORES SEMÁNTICOS
     ==================================== */
  --ra-color-green: #069169;
  --ra-color-radical-red: #F42F63;
  --ra-color-red-flag: #D31F3F;
  --ra-color-orange-v2: #FF6C00;
  --ra-color-yellow: #FAD118;

  /* ====================================
     COLOR ESPECÍFICO EDUCACIÓN
     ==================================== */
  --ra-color-education: #B43737;

  /* ====================================
     ALIASES SEMÁNTICOS
     ==================================== */

  /* Estados */
  --ra-color-success: var(--ra-color-green);
  --ra-color-error: var(--ra-color-red-flag);
  --ra-color-warning: var(--ra-color-yellow);
  --ra-color-info: var(--ra-color-cobalt);

  /* Textos */
  --ra-text-primary: var(--ra-color-matterhorn);
  --ra-text-secondary: var(--ra-color-grey);
  --ra-text-light: var(--ra-color-white);
  --ra-text-dark: var(--ra-color-black);

  /* Fondos */
  --ra-bg-primary: var(--ra-color-white);
  --ra-bg-secondary: var(--ra-color-white-smoke);
  --ra-bg-tertiary: var(--ra-color-solitude);
  --ra-bg-dark: var(--ra-color-matterhorn);
  --ra-bg-brand: var(--ra-color-cobalt);

  /* Bordes */
  --ra-border-light: var(--ra-color-silver);
  --ra-border-medium: var(--ra-color-grey);
  --ra-border-dark: var(--ra-color-matterhorn);

  /* ====================================
     HEADER ESPECÍFICO
     ==================================== */
  --ra-header-top-bg: var(--ra-color-cobalt);
  --ra-header-bottom-bg: var(--ra-color-white);
  --ra-header-text-primary: var(--ra-color-matterhorn);
  --ra-header-text-light: var(--ra-color-white);
  --ra-header-border: #E5E5E5;

  /* ====================================
     ESTADOS INTERACTIVOS
     ==================================== */
  --ra-color-focus: var(--ra-color-cobalt);
  --ra-color-hover: var(--ra-color-havelock-blue);
  --ra-color-active: var(--ra-color-blue-dark);
  --ra-color-disabled: var(--ra-color-silver);

  /* ====================================
     SOMBRAS
     ==================================== */
  --ra-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ra-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --ra-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ra-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --ra-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ra-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Sombras con color */
  --ra-shadow-cobalt: 0 4px 14px 0 rgba(9, 67, 181, 0.15);
  --ra-shadow-education: 0 4px 14px 0 rgba(180, 55, 55, 0.15);
}

/**
 * Utility classes para backgrounds
 */
.ra-bg-cobalt { background-color: var(--ra-color-cobalt); }
.ra-bg-matterhorn { background-color: var(--ra-color-matterhorn); }
.ra-bg-white { background-color: var(--ra-color-white); }
.ra-bg-solitude { background-color: var(--ra-color-solitude); }
.ra-bg-education { background-color: var(--ra-color-education); }

/**
 * Utility classes para textos
 */
.ra-text-cobalt { color: var(--ra-color-cobalt); }
.ra-text-matterhorn { color: var(--ra-color-matterhorn); }
.ra-text-white { color: var(--ra-color-white); }
.ra-text-grey { color: var(--ra-color-grey); }
.ra-text-education { color: var(--ra-color-education); }