/* ==========================================================================
   Harbor Preschool Academy — Design Tokens
   Fonte única de verdade para cor, tipografia, espaçamento, raio e sombra.
   Extraído das variáveis do Figma (Harbor / node 21066-571).
   ========================================================================== */

:root {
  /* ---------- Paleta bruta ---------- */

  /* Primary — azul Harbor */
  --color-primary-50:  #ecf2f7;
  --color-primary-200: #b5c9de;
  --color-primary-500: #175799;
  --color-primary-600: #144b84;
  --color-primary-700: #113f6e;
  --color-primary-800: #0d3259;
  --color-primary-900: #0a2540;

  /* Secondary — amarelo Harbor */
  --color-secondary-50:  #fff9ed;
  --color-secondary-200: #fee8b7;
  --color-secondary-500: #fcb71e;
  --color-secondary-700: #b58416;

  /* Auxiliary — teal Harbor */
  --color-auxiliary-50:  #ebf7f8;
  --color-auxiliary-200: #aee1e4;
  --color-auxiliary-400: #3fb7c0;
  --color-auxiliary-500: #03a0ac;
  --color-auxiliary-700: #02737c;

  /* Neutros */
  --color-neutral-cream: #fbf5e8;
  --color-white: #ffffff;
  --color-gray-25:  #fcfcfd;
  --color-gray-50:  #f9fafb;
  --color-gray-100: #e8e8e9;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #182230;

  /* Marca (aliases usados nas artes) */
  --color-brand-blue:      #175799;
  --color-brand-blue-deep: #155799;
  --color-brand-yellow:    #fcb71e;
  --color-brand-teal:      #03a0ac;

  /* ---------- Camada semântica ----------
     Use SEMPRE estes tokens nos componentes.
     A paleta bruta acima só deve aparecer aqui dentro. */

  --color-bg-default: var(--color-neutral-cream);
  --color-bg-subtle:  var(--color-secondary-50);
  --color-bg-brand:   var(--color-primary-500);
  --color-bg-accent:  var(--color-secondary-500);
  --color-bg-surface: var(--color-white);

  --color-primary-default: var(--color-primary-500);
  --color-primary-strong:  var(--color-primary-700);
  --color-primary-subtle:  var(--color-primary-50);

  --color-secondary-default: var(--color-secondary-500);
  --color-secondary-strong:  var(--color-secondary-700);
  --color-secondary-subtle:  var(--color-secondary-50);

  --color-auxiliary-default: var(--color-auxiliary-500);
  --color-auxiliary-strong:  var(--color-auxiliary-700);
  --color-auxiliary-subtle:  var(--color-auxiliary-50);

  --color-text-heading:  var(--color-brand-blue-deep);
  --color-text-body:     var(--color-gray-600);
  --color-text-strong:   var(--color-gray-700);
  --color-text-muted:    var(--color-gray-500);
  --color-text-on-brand: var(--color-neutral-cream);
  --color-text-on-dark:  var(--color-gray-25);

  --color-border-subtle: var(--color-gray-100);
  --color-focus-ring:    var(--color-auxiliary-500);

  /* ---------- Tipografia ----------
     A LP roda com DUAS famílias apenas. O Figma tem mais três, todas
     substituídas por decisão do projeto — não introduza nenhuma delas:

       Google Sans Flex  →  --font-body (Poppins), mesmo peso
       Geist             →  --font-body (Poppins), mesmo peso
       Neulis Medium     →  --font-display (Neulis Alt SemiBold)

     Equivalência de peso ao portar do Figma:
       Regular → 400 · Medium → 500 · SemiBold → 600 · Bold → 700
     Itálico (usado nos depoimentos) → Poppins 400 italic. */
  --font-display: "Neulis Alt", "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* escala fluida: mínimo em 360px, máximo em 1440px */
  --text-display: clamp(2.5rem, 1.6rem + 4vw, 4rem);         /* 40 → 64 */
  --text-h2:      clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);    /* 28 → 40 */
  --text-h3:      clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);  /* 22 → 28 */
  --text-h4:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);    /* 20 → 24 */
  --text-body-lg: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);  /* 16 → 18 */
  --text-body:    1rem;      /* 16 */
  --text-sm:      0.875rem;  /* 14 */
  --text-xs:      0.75rem;   /* 12 */

  --leading-display: 1;
  --leading-tight: 1.22;
  --leading-snug: 1.5;
  --leading-normal: 1.56;

  --tracking-wide: 0.01em;
  --tracking-eyebrow: 0.12em;

  /* ---------- Espaçamento (base 4) ---------- */
  --space-1: 0.25rem;   /* 4   */
  --space-2: 0.5rem;    /* 8   */
  --space-3: 0.75rem;   /* 12  */
  --space-4: 1rem;      /* 16  */
  --space-5: 1.25rem;   /* 20  */
  --space-6: 1.5rem;    /* 24  */
  --space-8: 2rem;      /* 32  */
  --space-10: 2.5rem;   /* 40  */
  --space-12: 3rem;     /* 48  */
  --space-14: 3.5rem;   /* 56  */
  --space-16: 4rem;     /* 64  */
  --space-20: 5rem;     /* 80  */
  --space-24: 6rem;     /* 96  */
  --space-31: 7.75rem;  /* 124 */

  /* ---------- Raios ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 80px;
  --radius-marker: 29px;
  --radius-full: 9999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 37, 64, 0.08);
  --shadow-lg: 0 24px 48px rgba(10, 37, 64, 0.12);

  /* ---------- Layout ---------- */
  --stage-width: 1440px;   /* canvas do Figma */
  --container-max: 1216px; /* área de conteúdo (1440 - 112*2) */
  --container-pad: clamp(1.25rem, 0.4rem + 3.6vw, 7rem);
  --header-height: 88px;

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-normal: 260ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---------- Z-index ---------- */
  --z-decor: 0;
  --z-content: 1;
  --z-header: 100;
  --z-dropdown: 200;
}