/* ============================================================
 *  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: #161C1F;   /* 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: #E3E6E8;   /* divisor */
  --color-ink-50:  #F4F6F7;

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

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

  /* --- ACENTOS --- */
  --color-accent-lilac:    #C6B8F5;
  --color-accent-info:     #0F8AF4;
  --color-accent-warn:     #FFD806;
  --color-accent-success:  #25B385;
  --color-accent-danger:   #FA4043;

  /* --- 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 --- */
  --font-display: "Oswald", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Roboto", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 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 */

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-loose:    1.6;

  --ls-overline: 0.12em;
  --ls-display:  -0.01em;

  --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), 5vw, var(--space-20));
  --container-max: 1440px;

  /* --- 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(255, 111, 0, 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: 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;
  }
}