/* ============================================================
 *  PITICAS CLUB — Design Tokens
 *  ------------------------------------------------------------
 *  Espelho fiel dos tokens do app (CoresPiticas.kt + TipografiaPiticas.kt).
 *  Trocar QUALQUER valor aqui propaga para o site inteiro —
 *  é o único arquivo a editar quando o time mudar a identidade.
 *  ============================================================ */

:root {
  /* --- PALETA NEUTRA (preto) --- */
  --color-ink-900: #00070A;   /* Cinza 900 — fundo dark principal */
  --color-ink-800: #161C20;   /* Cinza 800 — superfície */
  --color-ink-700: #2B3032;   /* Cinza 700 — superfície elevada */
  --color-ink-600: #3B4244;   /* Cinza 600 — superfície elevada alta */
  --color-ink-500: #485053;
  --color-ink-400: #697479;   /* texto terciário */
  --color-ink-300: #9AA3A7;   /* texto secundário */
  --color-ink-200: #C4CACD;   /* borda */
  --color-ink-100: #E6E6E6;   /* divisor */
  --color-ink-50:  #F4F6F7;

  /* --- PALETA NEUTRA (branco) --- */
  --color-white:     #FFFFFF;
  --color-off-white: #F7F8F9;

  /* --- MARCA --- */
  --color-brand:           #EA6120;   /* Laranja Piticas */
  --color-brand-pressed:   #C24E15;   /* Laranja escuro (hover/active) */
  --color-brand-soft:      #FBD9C6;   /* Laranja claro (tints) */
  --color-brand-deep:      #784A19;   /* Laranja profundo */

  /* --- ACENTOS --- */
  --color-accent-lilac:    #8850E2;   /* Roxo Piticas */
  --color-accent-info:     #00ABC9;   /* Ciano */
  --color-accent-warn:     #FAB612;   /* Âmbar */
  --color-accent-success:  #25B385;
  --color-accent-danger:   #E95B71;   /* Rosa */

  /* --- TOKENS SEMÂNTICOS --- */
  --color-bg:                var(--color-ink-900);
  --color-surface:           var(--color-ink-800);
  --color-surface-raised:    var(--color-ink-700);
  --color-text-primary:      var(--color-white);
  --color-text-secondary:    rgba(255, 255, 255, 0.75);
  --color-text-tertiary:     rgba(255, 255, 255, 0.55);
  --color-text-on-brand:     var(--color-ink-900);
  --color-border:            rgba(255, 255, 255, 0.10);
  --color-border-strong:     rgba(255, 255, 255, 0.20);

  /* --- TIPOGRAFIA --- */
  /* Figma → web: Inter→Gibson (títulos), Montserrat→Textbook New (padrão),
     Momo Signature→Quimby (ênfases script) */
  --font-display: "canada-type-gibson", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "textbook-new", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "quimby-gubernatorial", "quimby-mayoral", cursive;

  /* Escala tipográfica — segue TipografiaPiticas.kt e amplia para web */
  --fs-hero:        clamp(2.5rem, 4.5vw, 4rem);     /* 40-64px */
  --fs-h1:          clamp(2rem,   4vw,   3rem);     /* 32-48px */
  --fs-h2:          clamp(1.75rem, 3vw,  2.25rem);  /* 28-36px */
  --fs-h3:          clamp(1.25rem, 1.8vw, 1.5rem);  /* 20-24px */
  --fs-subtitle:    1.125rem;  /* 18px */
  --fs-body-lg:     1.0625rem; /* 17px */
  --fs-body:        0.9375rem; /* 15px */
  --fs-small:       0.8125rem; /* 13px */
  --fs-caption:     0.75rem;   /* 12px */
  --fs-overline:    0.875rem;  /* 14px */

  /* Escala do redesign (Figma @1440): clamp(min, px/14.4 vw, px-figma)
     — o termo em vw vale exatamente o px do Figma em viewport 1440 */
  --fs-display:     clamp(2.25rem, 3.75vw, 3.375rem);     /* 36 → 54px */
  --fs-step-title:  clamp(1.375rem, 1.875vw, 1.6875rem);  /* 22 → 27px */
  --fs-level-title: clamp(1.5rem, 2.1875vw, 1.96875rem);  /* 24 → 31.5px */
  --fs-eyebrow:     0.9375rem;    /* 15px */
  --fs-body-md:     0.984375rem;  /* 15.75px */
  --fs-btn:         0.84375rem;   /* 13.5px */

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-loose:    1.6;
  --lh-display-1: 1;        /* hero: 54/54 */
  --lh-display-2: 1.1111;   /* H2: 60/54 */
  --lh-body-md:   1.7143;   /* 27/15.75 */

  --ls-overline: 0.12em;
  --ls-display:  -0.008em;  /* -0.432px @54px (Figma) */
  --ls-eyebrow:  0.036em;   /* 0.54px @15px */
  --ls-btn:      0.036em;   /* 0.486px @13.5px */

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

  /* --- ESCALA DE ESPAÇAMENTO (4px grid) --- */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-30: 7.5rem;   /* 120px */

  /* Padding vertical padrão entre seções */
  --section-pad-y: clamp(var(--space-16), 9vw, var(--space-30));
  --section-pad-x: clamp(var(--space-6), 7.3vw, 6.5625rem); /* gutter Figma: 105px @1440 */
  --container-max: 1440px;

  /* --- BOTÕES (Figma: pill radius 75, alturas 36/62/78) --- */
  --btn-radius: 75px;
  --btn-h-sm:   36px;   /* header */
  --btn-h-md:   62px;   /* hero (62.25/61.5 normalizados) */
  --btn-h-xl:   78px;   /* faixa CTA */

  /* --- RAIOS --- */
  --radius-xs:    0.25rem;
  --radius-sm:    0.5rem;
  --radius-md:    0.75rem;
  --radius-lg:    1rem;
  --radius-xl:    1.5rem;
  --radius-2xl:   2rem;
  --radius-pill:  999px;

  /* --- ELEVATION / SOMBRAS --- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 24px 48px rgba(0, 0, 0, 0.45);
  --shadow-brand: 0 12px 32px rgba(234, 97, 32, 0.35);

  /* --- TRANSIÇÕES --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 280ms;
  --duration-slow:   500ms;

  /* --- Z-INDEX --- */
  --z-base:    1;
  --z-overlay: 10;
  --z-sticky:  20;
  --z-modal:   30;

  /* --- LAYOUT --- */
  --topbar-h: 90px; /* Figma: header 90px @desktop */
}

@media (max-width: 768px) {
  :root { --topbar-h: 72px; }
}

/* Modo de acessibilidade: respeita o "reduzir movimento" do SO */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}