/* ============================================================
   Gigafibra — design tokens
   Fonte: Figma "Gigafibra — Ventas PWA (Revendedores)"
          fileKey ni2a87crPCzvTITWXOCpuR · página 🎨 Foundations (node 0:1)
          coleções Primitives → Color (10:4) → Spacing · Radius · Size (10:156)
          tipografia (10:145)
   Os nomes semânticos são os mesmos do "code syntax WEB" das variáveis do Figma.
   Para re-temar: troque só os Primitives.
   ============================================================ */
:root {
  /* ---------- Primitives ---------- */
  --brand-500: #FF6600;
  --brand-600: #E65C00;
  --brand-50:  #FFF3EB;
  --ink-500:   #111111;
  --ink-50:    #F4F4F4;
  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-600:  #4B5563;
  --green-50:  #ECFDF3;
  --green-500: #22C55E;
  --green-700: #15803D;
  --amber-50:  #FFF7E6;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --red-50:    #FEF2F2;
  --red-600:   #DC2626;
  --red-700:   #B91C1C;
  --white:     #FFFFFF;

  /* ---------- Color · bg ---------- */
  --color-bg-page:           var(--gray-50);
  --color-bg-surface:        var(--white);
  --color-bg-muted:          var(--gray-100);
  --color-bg-disabled:       var(--gray-200);
  --color-bg-inverse:        var(--ink-500);
  --color-bg-brand:          var(--brand-500);
  --color-bg-brand-pressed:  var(--brand-600);
  --color-bg-brand-subtle:   var(--brand-50);
  --color-bg-ink:            var(--ink-500);
  --color-bg-ink-subtle:     var(--ink-50);
  --color-bg-success-subtle: var(--green-50);
  --color-bg-warning-subtle: var(--amber-50);
  --color-bg-danger-subtle:  var(--red-50);

  /* ---------- Color · text ---------- */
  --color-text-primary:   var(--ink-500);
  --color-text-secondary: var(--gray-600);
  --color-text-muted:     var(--gray-400);
  --color-text-disabled:  var(--gray-400);
  --color-text-on-brand:  var(--white);
  --color-text-brand:     var(--brand-600);
  --color-text-success:   var(--green-700);
  --color-text-warning:   var(--amber-700);
  --color-text-danger:    var(--red-700);

  /* ---------- Color · border ---------- */
  --color-border-default: var(--gray-200);
  --color-border-strong:  var(--gray-300);
  --color-border-brand:   var(--brand-500);
  --color-border-danger:  var(--red-600);
  --color-border-success: var(--green-500);

  /* ---------- Color · icon ---------- */
  --color-icon-default:  var(--gray-600);
  --color-icon-muted:    var(--gray-400);
  --color-icon-brand:    var(--brand-500);
  --color-icon-on-brand: var(--white);
  --color-icon-success:  var(--green-500);
  --color-icon-warning:  var(--amber-600);
  --color-icon-danger:   var(--red-600);

  /* ---------- Site (acrescentados para o website; não existem no Figma) ---------- */
  --color-text-on-ink:       var(--white);
  --color-text-on-ink-muted: var(--gray-300);
  --color-border-on-ink:     var(--gray-600);
  --color-whatsapp:          #128C7E;   /* verde escuro do WhatsApp: branco sobre ele passa em 4,5:1 */
  --color-whatsapp-pressed:  #0F7569;

  /* ---------- Spacing ---------- */
  --spacing-2xs: 2px;
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;

  /* ---------- Radius ---------- */
  --radius-sm:   8px;
  --radius-md:   12px;   /* botões, campos */
  --radius-lg:   16px;   /* cards */
  --radius-xl:   20px;
  --radius-full: 999px;  /* chips, badges */

  /* ---------- Size ---------- */
  --size-control:    52px;  /* Button lg, Field */
  --size-control-sm: 40px;
  --size-icon:       24px;
  --size-icon-sm:    20px;
  --size-touch:      44px;  /* Button md, Chip */
  --size-stroke:     1px;

  /* ---------- Type (Open Sans 400 / 600 / 700) ----------
     display      SemiBold 28/34
     title        SemiBold 22/28   (h2 de card, títulos de seção no mobile)
     heading      SemiBold 18/24   (h3)
     body         Regular  16/24
     body-strong  SemiBold 16/24
     label        SemiBold 14/20   (labels de campo, chips, nav)
     caption      Regular  13/18
     button       Bold     16/20
     price        Bold     22/28   (no site: 32/36 nos cards, display grande no hero)
     overline     SemiBold 12/16, tracking +0.4px, maiúsculas
  --------------------------------------------------------- */
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}