/* ============================================================
   PICCOLI BAMBINI — Design Tokens
   Sistema da MARCA OFICIAL (manual + logo oficial).
   Laranja #f79437 + Azul #1291d0 + quase-preto #231f20.
   Fonte: Sora (kit oficial, Google Fonts OFL).
   Contrastes WCAG 2.2 AA calculados (formula sRGB) — ver styles.css.
   Nomes de variavel (green / earth / sand / neutral) sao
   identificadores internos; os valores seguem a marca real.
   ============================================================ */

:root {
  /* === PRIMITIVOS === */

  /* Escala laranja (antes "green") — laranja marca #f79437 no centro */
  --color-green-900: #2c1400;
  --color-green-700: #6b3500;
  --color-green-500: #f79437;
  --color-green-300: #fbb96a;
  --color-green-100: #fde8c6;
  --color-green-50:  #fff7ed;

  /* Escala azul (antes "earth") — azul marca #1291d0 no centro */
  --color-earth-900: #051a26;
  --color-earth-700: #0a6ca8;
  --color-earth-500: #1291d0;
  --color-earth-300: #4ab3e0;
  --color-earth-100: #bfe4f4;
  --color-earth-50:  #e8f6fc;

  /* Escala neutra fria (suporte, superficie, divisores) */
  --color-sand-900: #1a1d20;
  --color-sand-700: #3d4248;
  --color-sand-500: #737880;
  --color-sand-300: #b0b5bd;
  --color-sand-100: #e4e6e9;
  --color-sand-50:  #f4f5f6;

  --color-neutral-950: #0e1012;
  --color-neutral-900: #1a1d20;
  --color-neutral-800: #2b3036;
  --color-neutral-600: #50565f;
  --color-neutral-400: #8c929b;
  --color-neutral-200: #d0d3d8;
  --color-neutral-100: #eaeced;
  --color-neutral-50:  #f4f5f6;

  /* === SEMANTICOS === */

  /* Marca */
  --color-brand-primary:        #f79437;
  --color-brand-primary-strong: #9c5800;
  --color-brand-primary-deep:   #6b3500;
  --color-brand-secondary:      #0a6ca8;

  /* Superficies */
  --color-surface-body:   #fdf9f6;
  --color-surface-raised: #ffffff;
  --color-surface-soft:   #fff7ed;
  --color-surface-sand:   #f4f5f6;
  --color-surface-deep:   #231f20;

  /* Texto */
  --color-text-primary:       #231f20;
  --color-text-secondary:     #3d4248;
  --color-text-muted:         #50565f;
  --color-text-on-dark:       #fdf9f6;
  --color-text-on-dark-muted: #b0b5bd;

  /* Funcionais */
  --color-semantic-success: #1a7a3a;
  --color-semantic-error:   #b23528;
  --color-semantic-focus:   #1291d0;

  /* Destaques */
  --color-step3-bg:     #fde8c6;
  --color-step3-border: #f79437;
  --color-badge-bg:     #e8f6fc;
  --color-badge-fg:     #0a6ca8;
  --color-badge-border: #1291d0;

  /* === TIPOGRAFIA — Sora === */
  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-display:  clamp(2.5rem, 1.6rem + 4.2vw, 4rem);
  --text-h1:       clamp(2rem, 1.4rem + 2.8vw, 2.75rem);
  --text-h2:       clamp(1.6rem, 1.2rem + 1.9vw, 2.1rem);
  --text-h3:       1.5rem;
  --text-h4:       1.25rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-body-sm:  0.875rem;
  --text-label:    0.8125rem;
  --text-caption:  0.75rem;

  --lh-tight: 1.12;
  --lh-snug:  1.25;
  --lh-base:  1.6;

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

  /* === ESPACAMENTO (base 4px) === */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* === RADIUS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* === SOMBRAS (neutras frias) === */
  --shadow-sm:    0 1px 3px rgba(35,31,32,.07);
  --shadow-md:    0 4px 12px rgba(35,31,32,.10);
  --shadow-lg:    0 12px 32px rgba(35,31,32,.13);
  --shadow-xl:    0 24px 48px rgba(35,31,32,.17);
  --shadow-focus: 0 0 0 3px rgba(18,145,208,.30);

  /* === BORDAS === */
  --border-subtle: 1px solid rgba(35,31,32,.08);
  --border-strong: 1px solid rgba(35,31,32,.18);
  --border-brand:  2px solid var(--color-brand-primary);

  /* === LAYOUT === */
  --container-max:    1180px;
  --container-narrow: 680px;
  --header-h:         64px;

  /* === MOTION === */
  --duration-fast:   150ms;
  --duration-base:   220ms;
  --duration-slow:   350ms;
  --duration-reveal: 520ms;
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* === Z-INDEX === */
  --z-header: 20;
  --z-float:  30;
  --z-skip:   50;
}