/* PAES S.O.S — design tokens (Hallmark custom theme, v2 CLARA)
 * vibe: "crema soleada, navy del logo, naranja señal, urgencia S.O.S"
 * axes: light / geometric-sans / warm
 */
:root {
  /* color — paper / ink */
  --color-paper:    oklch(96.5% 0.016 85);  /* crema cálida, nunca blanco puro */
  --color-paper-2:  oklch(93% 0.024 85);    /* franja alterna */
  --color-surface:  oklch(98.5% 0.008 85);  /* cards, casi-blanco cálido */
  --color-ink:      oklch(26% 0.055 265);   /* navy del logo como tinta */
  --color-ink-2:    oklch(42% 0.045 262);   /* texto secundario */
  --color-muted:    oklch(52% 0.035 260);   /* labels */
  --color-rule:     oklch(85% 0.02 85);     /* hairlines cálidas */

  /* color — acentos (cada uno es dueño de su superficie) */
  --color-accent:      oklch(78% 0.150 75);   /* naranja marca — rellenos de CTA */
  --color-accent-deep: oklch(60% 0.130 70);   /* borde/edge del botón push */
  --color-accent-text: oklch(58% 0.140 62);   /* ámbar oscuro — números/texto naranja sobre crema */
  --color-accent-ink:  oklch(22% 0.050 265);  /* texto sobre naranja */
  --color-red:         oklch(55% 0.210 30);   /* S.O.S — urgencia */
  --color-sky:         oklch(50% 0.130 250);  /* Ciencias (legible sobre crema) */
  --color-indigo:      oklch(47% 0.150 285);  /* Matemáticas */
  --color-focus:       oklch(55% 0.170 62);   /* anillo de foco */

  /* type */
  --font-display: "Space Grotesk", "Trebuchet MS", ui-sans-serif, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Segoe UI", ui-sans-serif, sans-serif;

  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.1875rem;
  --text-lg:   1.4375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-display-s: clamp(2rem, 3.2vw + 1rem, 3.25rem);
  --text-display:   clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
  --text-figure:    clamp(4.5rem, 11vw + 1rem, 9rem);   /* el 2.167 */

  /* space — 4pt */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* layout */
  --shell: 71.25rem;
  --page-gutter: clamp(1rem, 4vw, 2rem);

  /* motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-press:  cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* shape */
  --radius-card:  20px;
  --radius-shot:  18px;
  --radius-pill:  999px;
  --radius-input: 12px;

  /* sombras cálidas para tema claro */
  --shadow-card:  0 12px 32px -18px oklch(30% 0.06 265 / 0.35);
  --shadow-photo: 0 16px 36px -18px oklch(30% 0.06 265 / 0.45);

  /* z */
  --z-raised: 10;
  --z-sticky: 200;
}