/* ==========================================================================
   PÃO DE ALHO DO JULIO — Design Tokens
   Canonical source: /docs/03-DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  /* ── Colors ── */
  --color-bg:          #090909;
  --color-surface:     #141414;
  --color-surface-alt: #1B1B1B;
  --color-offwhite:    #F4EFE7;
  --color-white:       #FFFFFF;
  --color-muted:       #A7A7A7;
  --color-orange:      #F28C28;
  --color-amber:       #F6A623;
  --color-red:         #E52B2F;

  /* ── Card border ── */
  --card-border: rgba(255, 255, 255, 0.08);

  /* ── Typography ── */
  --font-display: 'Archivo Black', sans-serif;
  --font-body:    'Manrope', sans-serif;

  /* ── Font sizes — mobile-first ── */
  --fs-hero:      clamp(2.625rem, 8vw, 5rem);       /* 42px → 80px */
  --fs-section:   clamp(2rem, 5vw, 3.5rem);          /* 32px → 56px */
  --fs-subtitle:  clamp(1.25rem, 3vw, 1.875rem);     /* 20px → 30px */
  --fs-body:      clamp(1rem, 1.5vw, 1.1875rem);     /* 16px → 19px */
  --fs-small:     clamp(0.875rem, 1.2vw, 1rem);      /* 14px → 16px */
  --fs-eyebrow:   clamp(0.75rem, 1vw, 0.875rem);     /* 12px → 14px */

  /* ── Spacing ── */
  --space-xs:     0.5rem;    /* 8px */
  --space-sm:     1rem;      /* 16px */
  --space-md:     1.5rem;    /* 24px */
  --space-lg:     2rem;      /* 32px */
  --space-xl:     3rem;      /* 48px */
  --space-2xl:    4rem;      /* 64px */
  --space-3xl:    5.5rem;    /* 88px */
  --space-4xl:    8.75rem;   /* 140px */
  --space-section: clamp(4rem, 8vw, 8.75rem);  /* 64px → 140px */

  /* ── Layout ── */
  --container-max:   1320px;
  --container-pad:   20px;

  /* ── Radius ── */
  --radius-button:   11px;
  --radius-card:     14px;
  --radius-image:    14px;

  /* ── Transitions ── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   0.3s;
  --duration-normal: 0.6s;
  --duration-slow:   0.85s;

  /* ── Safe area ── */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tablet+ container padding */
@media (min-width: 768px) {
  :root {
    --container-pad: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 60px;
  }
}