/*
  Design tokens, sourced from UCAL Manual de Identidad 2025 (mismos valores
  que shared/css/tokens.css en UCAL PLAY: logo real + colorimetría por
  facultades, pág. 3 y 5 del manual). Nada aquí se inventó.
*/

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/anton.woff2') format('woff2');
}

@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/permanent-marker.woff2') format('woff2');
}

:root {
  /* ---- Brand colors (UCAL Manual de Identidad 2025, pág. 3 y 5) ---- */
  --ucal-black: #000000;
  --ucal-white: #FFFFFF;
  --ucal-teal: #43A894;      /* Facultad de Comunicación y Psicología */
  --ucal-purple: #8A2E80;    /* Facultad de Negocios */
  --ucal-pink: #EA3681;      /* Facultad de Arquitectura */
  --ucal-orange: #F19439;    /* Facultad de Diseño */

  /* ---- Neutrals (no están en el manual; grises de UI, cálidos) ---- */
  --gray-50: #F7F7F5;
  --gray-100: #EFEFEC;
  --gray-200: #E1E1DC;
  --gray-300: #C7C7C0;
  --gray-400: #9A9A92;
  --gray-600: #5C5C56;
  --gray-900: #121210;

  /* ---- Semantic tokens ---- */
  --color-bg: var(--ucal-white);
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-200);
  --color-focus-ring: var(--ucal-teal);

  /* ---- Pares fondo/texto para estados (éxito, error, "próximo"/info) ----
     Antes vivían como hex sueltos repetidos en components.css; ahora son
     tokens para que el modo oscuro los pueda redefinir en un solo lugar. */
  --color-success-bg: #E3F3EF;
  --color-success-fg: #1E6E5C;
  --color-error-bg: #FDE9F1;
  --color-error-fg: #8E1748;
  --color-error-text: #C71F5E;
  --color-info-bg: #F1E3EF;
  --color-info-fg: var(--ucal-purple);

  /* ---- Colores por facultad (para acentos del cronograma) ----
     Contraste verificado WCAG AA (4.5:1): teal/orange/pink piden texto
     oscuro; purple pide texto claro. */
  --fac-comunicacion-bg: var(--ucal-teal);
  --fac-comunicacion-fg: var(--ucal-black);
  --fac-negocios-bg: var(--ucal-purple);
  --fac-negocios-fg: var(--ucal-white);
  --fac-diseno-bg: var(--ucal-orange);
  --fac-diseno-fg: var(--ucal-black);
  --fac-arquitectura-bg: var(--ucal-pink);
  --fac-arquitectura-fg: var(--ucal-black);
  /* Fijo (no var(--gray-900)) a propósito: gray-900 se invierte en modo
     oscuro y volvería casi blanco, dejando texto blanco sobre fondo casi
     blanco para cualquier Tipo sin match. Este es el único fondo "sin
     facultad", así que necesita ser oscuro siempre, igual que los demás
     pares fac-*-bg/fg de arriba. */
  --fac-default-bg: #121210;
  --fac-default-fg: var(--ucal-white);

  /* ---- Estados del cronograma ---- */
  --state-anterior: var(--gray-400);
  --state-actual: var(--ucal-teal);
  --state-siguiente: var(--ucal-purple);

  /* ---- Tipografía (UCAL Manual, pág. 7-8: Anton 70% / Helvetica Neue 20% / Good Brush 10%) ---- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* "Good Brush" es una fuente con licencia comercial no disponible para
     self-host aquí. Permanent Marker (Google Fonts, OFL) es el sustituto de
     energía similar usado en el resto del portafolio (ver ucalplay). */
  --font-accent: 'Permanent Marker', cursive;

  /* ---- Radii ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Shadows: con tinte, nunca negro puro ---- */
  --shadow-sm: 0 2px 8px rgba(18, 18, 16, 0.08);
  --shadow-md: 0 8px 24px rgba(18, 18, 16, 0.12);
  --shadow-lg: 0 16px 48px rgba(18, 18, 16, 0.16);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;

  /* ---- Layout: portal responsive (no es un shell tipo kiosko de una sola
     pantalla como en ucalplay; esto es un sitio real que debe verse bien
     desde 320px hasta un monitor de escritorio) ---- */
  --gutter: 20px;
  --content-max-width: 720px;
  --sidebar-width: 248px;
  --topbar-height: 60px;
  --tabbar-height: 68px;
  --breakpoint-desktop: 900px;
}

/*
  Modo oscuro, reactivo al sistema (sin switch manual: sigue lo que el
  dispositivo ya tiene configurado). Solo se redefinen los tokens
  SEMÁNTICOS (--color-*) y la escala de grises — los colores de marca
  (--ucal-teal, --ucal-pink...) y --ucal-black/--ucal-white NO cambian:
  siguen siendo los colores reales del Manual de Identidad y las parejas
  fondo/texto de --fac-*-fg (elegidas por contraste contra ESE color de
  fondo, no contra el tema de la página), así que tocarlos aquí rompería
  ese contraste ya verificado. Invertir gray-50..gray-900 alcanza para que
  toda la UI (superficies, texto, bordes) seman independientemente sin
  tener que retocar components.css.
*/
/*
  El tema sigue al sistema por defecto, pero se puede overridear a mano
  (botón .theme-toggle, ver js/theme-toggle.js) guardando la preferencia en
  localStorage y marcando <html data-theme="dark|light">. Por eso el bloque
  de abajo se aplica de dos formas:
  - Vía media query, pero solo si NO hay override a claro
    (:not([data-theme="light"])): así el sistema en oscuro sigue mandando
    mientras nadie haya tocado el botón.
  - Vía [data-theme="dark"] directo, sin depender de prefers-color-scheme:
    así el override manual funciona aunque el sistema esté en claro.
  Un override a "light" no necesita bloque propio: los valores de :root ya
  son los claros, así que solo hace falta que la regla de arriba no pise.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gray-50: #1C1C1A;
    --gray-100: #242422;
    --gray-200: #34342F;
    --gray-300: #47473F;
    --gray-400: #7C7C72;
    --gray-600: #B8B8AE;
    --gray-900: #F5F5F2;

    --color-bg: #121210;
    --color-surface: var(--gray-50);
    --color-text: var(--gray-900);
    --color-text-muted: var(--gray-600);
    --color-border: var(--gray-200);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

    --color-success-bg: rgba(67, 168, 148, 0.18);
    --color-success-fg: #7FE0C7;
    --color-error-bg: rgba(234, 54, 129, 0.16);
    --color-error-fg: #FF9EC4;
    --color-error-text: #FF9EC4;
    --color-info-bg: rgba(138, 46, 128, 0.22);
    --color-info-fg: #E7A6DE;
  }
}

:root[data-theme="dark"] {
  --gray-50: #1C1C1A;
  --gray-100: #242422;
  --gray-200: #34342F;
  --gray-300: #47473F;
  --gray-400: #7C7C72;
  --gray-600: #B8B8AE;
  --gray-900: #F5F5F2;

  --color-bg: #121210;
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-200);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

  --color-success-bg: rgba(67, 168, 148, 0.18);
  --color-success-fg: #7FE0C7;
  --color-error-bg: rgba(234, 54, 129, 0.16);
  --color-error-fg: #FF9EC4;
  --color-error-text: #FF9EC4;
  --color-info-bg: rgba(138, 46, 128, 0.22);
  --color-info-fg: #E7A6DE;
}