/* ─────────────────────────────────────────
   FOCUS PERFORMANCE — tokens
   Source: Figma "Focus Performance — Landing" (collection `focus`)
   and conteudo-marca/brand/tokens.md.
───────────────────────────────────────── */
:root {
  /* ── Color ── */
  --color-black:    #030303;  /* Figma "Principal" — text, cards, dark buttons */
  --color-yellow:   #F7D20A;  /* Figma "Secundária" — CTA, highlights */
  --color-orange:   #FD5403;  /* Focus Premium accent (sampled from the price banner) */
  --color-white:    #FBFBFB;
  --color-surface:  #FAFBFD;  /* light sections, price box */
  --color-gray-900: #141414;  /* page / dark sections background */
  --color-gray-700: #2A2A2A;  /* dividers on dark, body text on light */
  --color-gray-400: #9A9A9A;  /* muted text */
  --color-gray-200: #D9D9D9;  /* body text on dark, dividers on light */

  /* ── Typography ── */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-display: 800 72px/72px var(--font-display);   /* italic */
  --text-h1:      800 56px/58px var(--font-display);   /* italic */
  --text-h2:      800 40px/44px var(--font-display);   /* italic */
  --text-h3:      800 28px/32px var(--font-display);
  --text-price:   800 48px/52px var(--font-display);
  --text-eyebrow: 800 16px/20px var(--font-display);   /* uppercase, +2px tracking */
  --text-body-l:  400 20px/30px var(--font-body);
  --text-body:    400 17px/26px var(--font-body);
  --text-body-m:  500 17px/24px var(--font-body);
  --text-caption: 500 14px/20px var(--font-body);      /* +0.5px tracking */

  /* ── Spacing & radius ── */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ── Layout ── */
  --content-width: 1200px;
  --section-pad-y: 96px;
  --section-pad-x: 120px;
}

@media (max-width: 767px) {
  :root {
    --text-display: 800 56px/58px var(--font-display);
    --text-h2:      800 40px/44px var(--font-display);
    --section-pad-y: 64px;
    --section-pad-x: 20px;
  }
}