/* My Little Town Learning Center · tokens del sistema de diseño (fuente: tokens.json del sistema publicado) */

@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/quicksand-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/quicksand-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/quicksand-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Sour Gummy"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/sour-gummy-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sour Gummy"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/sour-gummy-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Color */
  --surface: #F5E8D5;
  --surface-raised: #FFF9EE;
  --brand: #277C78;
  --garden: #668A68;
  --sunflower: #F0C75E;
  --bougainvillea: #E7A9B9;
  --ink: #1B4A47;
  --ink-muted: #3F6B66;
  --on-brand: #FFFFFF;
  --on-sunflower: var(--ink);
  --turquoise-tint: #D5E9E5;
  --garden-tint: #DDE8DA;
  --sunflower-tint: #FBEFC8;
  --bougainvillea-tint: #F8E1E8;
  --line: #DCC9AB;
  --focus-ring: var(--ink);
  /* Velos y brillos (derivados de surface y sunflower; solo detrás de la ilustración) */
  --surface-clear: rgba(245, 232, 213, 0);
  --surface-veil: rgba(245, 232, 213, 0.62);
  --sunflower-clear: rgba(240, 199, 94, 0);
  --sunflower-glow: rgba(240, 199, 94, 0.7);
  --shimmer: rgba(255, 255, 255, 0.75);

  /* Tipografía */
  --font-display: "Sour Gummy", "Quicksand", system-ui, sans-serif;
  --font-sans: "Quicksand", system-ui, sans-serif;

  /* Espaciado (base 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-soft: 0 6px 20px rgba(39, 124, 120, 0.14);
  --shadow-lift: 0 14px 36px rgba(39, 124, 120, 0.18);

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-ui: 160ms;
  --dur-rise: 620ms;
}