/* ============================================================================
   theme.css — equivalente web de composeApp/src/commonMain/.../ui/theme/
   ============================================================================

   Este archivo es el espejo de tres archivos Kotlin. Los nombres se conservan
   a propósito: si buscas `PrimaryYellow` en el repo, caes en Colors.kt y aquí.

     Colors.kt      → :root { --primary-yellow, --secondary-blue, ... }
     Dimensions.kt  → :root { --spacing-16, --elevation-4, --stroke-width-1 }
     Type.kt        → @font-face + escala tipográfica + .text-* (AppTextStyles)

   REGLA (la misma que CLAUDE.md impone en la app): ningún valor de color,
   espaciado o tipografía se escribe a mano fuera de este archivo. Las páginas
   no conocen hex ni píxeles; solo usan las clases de components.css.

   dp vs px: el `px` de CSS ya es independiente de la densidad (el navegador lo
   escala igual que Android escala el dp), así que el mapeo es 1:1 sin cuentas.
   ============================================================================ */


/* --- Tipografía: composeResources/font/ ----------------------------------- */
/* La app solo empaqueta el peso Regular (400) y deja que Compose sintetice el
   bold. Aquí pasa lo mismo: el navegador sintetiza los pesos 600/700 a partir
   de este único archivo. Si algún día se añade el .ttf Bold a la app, se añade
   otro @font-face con font-weight: 700 y ambos dejan de ser sintéticos. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./fonts/plus-jakarta-sans-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* --- COLORES BASE (Colors.kt) ------------------------------------------ */
  --primary-yellow: #F4D125;
  --primary-container-yellow: #FEF3C7;
  --secondary-blue: #003366;
  --background-gray: #F8F8F5;
  --surface-white: #FFFFFF;

  /* --- COLORES DE ESTADO / FEEDBACK -------------------------------------- */
  --error-red: #EF4444;
  --success-green: #10B981;
  --warning-orange: #F59E0B;

  /* --- DERIVADOS M3 ------------------------------------------------------ */
  --on-primary: #000000;
  --on-primary-container: #221B00;
  --on-secondary: #FFFFFF;
  --on-background: #1A1C1E;
  --on-surface: #1A1C1E;
  --surface-variant: #F1F5F9;
  --on-surface-variant: #475569;
  --outline: #94A3B8;
  --outline-variant: #E2E8F0;
  --error-container: #FEE2E2;
  --on-error-container: #7F1D1D;

  /* --- ESPACIADO (Dimensions.kt) ----------------------------------------- */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;

  /* --- ELEVACIÓN --------------------------------------------------------- */
  /* En Compose la elevación es un Dp que Material traduce a sombra; en web hay
     que escribir la sombra resultante. Se mantiene la escala 0/4/8. */
  --elevation-0: none;
  --elevation-4: 0 1px 3px rgba(26, 28, 30, .08), 0 1px 2px rgba(26, 28, 30, .04);
  --elevation-8: 0 4px 12px rgba(26, 28, 30, .10);

  /* --- TRAZO / BORDE ----------------------------------------------------- */
  --stroke-width-1: 1px;
  --stroke-width-2: 2px;

  /* --- FORMA -------------------------------------------------------------- */
  /* AppCard usa CardDefaults.shape (12dp); AppButton, RoundedCornerShape(spacing16). */
  --shape-card: 12px;
  --shape-button: var(--spacing-16);

  /* --- ESCALA TIPOGRÁFICA (Type.kt) --------------------------------------- */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --headline-small-size: 24px;      --headline-small-line: 32px;
  --title-large-size: 22px;         --title-large-line: 28px;
  --title-medium-size: 16px;        --title-medium-line: 24px;
  --body-large-size: 16px;          --body-large-line: 24px;
  --body-medium-size: 14px;         --body-medium-line: 20px;
  --body-small-size: 12px;          --body-small-line: 16px;
  --label-large-size: 14px;         --label-large-line: 20px;

  /* --- SOLO WEB ----------------------------------------------------------
     No tienen equivalente en Dimensions.kt porque son problemas que la app no
     tiene: en un móvil el ancho lo fija la pantalla, pero un navegador de
     escritorio estiraría el texto a 1900px y sería ilegible. */
  --screen-max-width: 680px;
}

/* Sin bloque `prefers-color-scheme: dark` a propósito: `Theme.kt` solo define
   `MetroLightColorScheme`, así que inventar una paleta oscura aquí sería
   adelantarse a una decisión de diseño que la app todavía no tomó. Cuando
   exista `MetroDarkColorScheme` (ver docs/improvements.md §4), se añade aquí un
   bloque que redefina los mismos tokens y las páginas no cambian ni una línea. */


/* --- AppTextStyles (Type.kt) ---------------------------------------------- */
/* Los roles semánticos: el peso tipográfico se decide aquí, nunca en la página,
   exactamente igual que en la app. */

.text-screen-title {
  font-size: var(--headline-small-size);
  line-height: var(--headline-small-line);
  font-weight: 700;
  color: var(--on-background);
}

.text-section-title {
  font-size: var(--title-medium-size);
  line-height: var(--title-medium-line);
  font-weight: 700;
  color: var(--on-background);
}

.text-list-item-title {
  font-size: var(--body-large-size);
  line-height: var(--body-large-line);
  font-weight: 600;
  color: var(--on-surface);
}

.text-body {
  font-size: var(--body-large-size);
  line-height: var(--body-large-line);
  font-weight: 400;
  color: var(--on-surface);
}

/* Equivale al `color = onSurface.copy(alpha = .6f)` que usan las pantallas para
   el texto secundario; aquí se resuelve con el token onSurfaceVariant, que es
   el color con el que M3 nombra ese mismo rol. */
.text-body-muted {
  font-size: var(--body-large-size);
  line-height: var(--body-large-line);
  font-weight: 400;
  color: var(--on-surface-variant);
}

.text-caption {
  font-size: var(--body-medium-size);
  line-height: var(--body-medium-line);
  font-weight: 400;
  color: var(--on-surface-variant);
}

.text-emphasis {
  font-weight: 700;
}

.text-error {
  color: var(--error-red);
  font-weight: 700;
}