/* ═══════════════════════════════════════════════════════════
   GARDEN HERO  ·  Design Tokens
   Fonte única de verdade para todo o site.
   Importe este arquivo em todas as páginas.
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Cor ─────────────────────────────────────────────── */
  --color-gold:         #FFC515;       /* amarelo principal          */
  --color-gold-dim:     rgba(255, 197, 21, 0.35);
  --color-gold-glow:    rgba(255, 197, 21, 0.18);
  --color-gold-soft:    rgba(255, 197, 21, 0.08);

  --color-white:        #ffffff;
  --color-white-80:     rgba(255, 255, 255, 0.80);
  --color-white-50:     rgba(255, 255, 255, 0.50);
  --color-white-38:     rgba(255, 255, 255, 0.38);

  --color-bg:           #080c0a;       /* fundo escuro base          */

  /* ── Glassmorphism ───────────────────────────────────── */
  --glass-bg:           rgba(255, 255, 255, 0.07);
  --glass-bg-hover:     rgba(255, 255, 255, 0.11);
  --glass-border:       rgba(255, 255, 255, 0.14);
  --glass-border-gold:  rgba(255, 197, 21, 0.45);
  --glass-blur:         blur(22px);
  --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.25),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ── Tipografia ─────────────────────────────────────── */
  --font-display: 'Nouveau Nostalgia', serif;
  --font-body:    'Georgia', serif;

  /* Escala: Terça Maior (×1.250)  ·  base = 16px          *
   * Passo    Fator       Valor                             *
   *  −2      ÷ 1.25²    10.24 px                          *
   *  −1      ÷ 1.25     12.80 px                          *
   *   0      base       16.00 px  ← body text             *
   *  +1      × 1.25¹    20.00 px                          *
   *  +2      × 1.25²    25.00 px                          *
   *  +3      × 1.25³    31.25 px                          *
   *  +4      × 1.25⁴    39.06 px                          *
   *  +5      × 1.25⁵    48.83 px                          *
   *  +6      × 1.25⁶    61.04 px                          *
   *  +7      × 1.25⁷    76.29 px                          *
   *  +8      × 1.25⁸    95.37 px                          *
   *  +9      × 1.25⁹   119.21 px                          */
  --text-2xs:  10.24px;
  --text-xs:   12.80px;
  --text-sm:   16.00px;
  --text-md:   20.00px;
  --text-lg:   25.00px;
  --text-xl:   31.25px;
  --text-2xl:  39.06px;
  --text-3xl:  48.83px;
  --text-4xl:  61.04px;
  --text-5xl:  76.29px;
  --text-6xl:  95.37px;
  --text-7xl: 119.21px;

  /* Usos recomendados                                      *
   * --text-2xs  →  créditos, labels secundários           *
   * --text-xs   →  nav, botões, cite, legenda             *
   * --text-sm   →  corpo de texto, parágrafos             *
   * --text-md   →  subtítulos menores                     *
   * --text-lg   →  subtítulos (subtitle clamp max)        *
   * --text-xl   →  seções de destaque                     *
   * --text-2xl+ →  display / títulos grandes              *
   * --text-4xl  →  hero title clamp min  (61 px)          *
   * --text-7xl  →  hero title clamp max  (119 px)         */

  /* ── Espaçamento ─────────────────────────────────────── */
  /* Mesma razão 1.250 aplicada ao espaço base 4px          */
  --space-1:   4px;    /* 4                */
  --space-2:   5px;    /* 4 × 1.25         */
  --space-3:   6.25px; /* 4 × 1.25²        */
  --space-4:   8px;    /* 4 × 1.25³ ≈ 7.8  */
  --space-5:   10px;   /* 4 × 1.25⁴ ≈ 9.8  */
  --space-6:   12px;
  --space-8:   16px;
  --space-10:  20px;
  --space-12:  24px;
  --space-16:  32px;
  --space-20:  40px;
  --space-24:  48px;
  --space-28:  56px;
  --space-32:  64px;

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 100px;

  /* ── Transição ───────────────────────────────────────── */
  --ease-default: 0.3s ease;
  --ease-slow:    0.5s ease;
  --ease-fast:    0.15s ease;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-bg:       0;
  --z-content:  100;
  --z-nav:      200;
  --z-overlay:  300;
}