:root {
  /* ── Paleta oficial Circletime Teaching ── */

  /* Primarios */
  --color-verde: #1D9E75;           /* Turquesa — logo, color principal */
  --color-verde-claro: #9FE1CB;     /* Menta — hover, acentos secundarios */
  --color-verde-suave: #E6FAF4;     /* Turquesa muy diluido — fondos sutiles */

  /* Neutros */
  --color-blanco: #FFFFFF;
  --color-gris-texto: #1D1D2E;      /* Casi negro — texto principal */
  --color-gris-suave: #5C5C72;      /* Gris medio — texto secundario */
  --color-gris-borde: #E2E0EE;

  /* Acento — Rosa */
  --color-naranja: #ED93B1;         /* Rosa chicle — CTA principal */
  --color-naranja-oscuro: #D4708E;  /* Rosa oscuro — shadow del CTA */
  --color-naranja-claro: #F4C0D1;   /* Rosa palo — fondos y badges */
  --color-amarillo: #C0DD97;        /* Lima suave — detalles decorativos */

  /* Fondos */
  --color-fondo: #FFFFFF;
  --color-fondo-hero: #f8f4ee;      /* Crema — fondo hero principal */
  --color-fondo-oscuro: #1D1D2E;    /* Casi negro — sección oscura */

  /* ── Tipografía oficial ── */
  --font-display: 'Fredoka', system-ui, sans-serif;     /* Títulos y logo */
  --font-body: 'Nunito Sans', system-ui, sans-serif;    /* Subtítulos y materiales */
  --font-mono: 'DM Mono', 'Courier New', monospace;     /* Labels, badges */

  /* Escala tipográfica */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  3rem;       /* 48px */
  --text-4xl:  4rem;       /* 64px */
  --text-5xl:  5.5rem;     /* 88px — números decorativos */

  /* Espaciado */
  --space-1:   0.5rem;
  --space-2:   1rem;
  --space-3:   1.5rem;
  --space-4:   2rem;
  --space-6:   3rem;
  --space-8:   4rem;
  --space-12:  6rem;
  --space-16:  8rem;
  --space-24:  12rem;

  /* Border radius */
  --radius-sharp: 2px;
  --radius-btn:   3px;
  --radius-card:  4px;
  --radius-pill:  9999px;

  /* Layout */
  --max-width-text:    640px;
  --max-width-content: 900px;
  --max-width-wide:    1200px;
  --container-padding: 1.5rem;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
}

@media (max-width: 768px) {
  :root {
    --container-padding: 1.25rem;
  }
}