/* =============================================
   TOKENS — Lanchonete: papel kraft + tinta café + 1 destaque tomate (mostarda só sobre fundo escuro)
   Contraste medido: tinta/papel 15.0 · muted/papel 6.5 · muted/surface 5.6 · branco/tomate 5.7
   · tomate-texto/papel 6.3 · mostarda/tinta 9.5
   ============================================= */
:root {
  --primary:      #C0301F;   /* tomate: botão principal (texto branco) */
  --primary-dark: #A2261A;   /* hover */
  --accent-text:  #A2261A;   /* tomate quando é texto pequeno */
  --mostarda:     #F2B233;   /* destaque sobre fundo escuro */
  --white:        #FFFFFF;
  --ink:          #1E1612;   /* tinta café */
  --paper:        #F3EBDD;   /* papel kraft claro */
  --surface:      #E8DCC6;   /* blocos e cards */
  --creme:        #F8E3B5;   /* tom pastel do selo, dos checks e dos contadores */

  --color-primary:    var(--primary);
  --color-bg:         var(--paper);
  --color-text:       var(--ink);
  --color-text-muted: #5E5145;
  --color-border:     rgba(30, 22, 18, 0.14);
  --color-accent:     var(--accent-text);

  /* preloader (premium.css) */
  --bg: var(--paper);
  --fg: var(--ink);

  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body:    'Work Sans', -apple-system, system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-4xl:  clamp(2.5rem, 6vw, 4.75rem);
  --text-hero: clamp(3.25rem, 8.5vw, 7.5rem);

  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* geometria de balcão: canto curto, nada de pílula */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  --shadow-card: 0 6px 16px rgba(30, 22, 18, 0.08);
  --shadow-foto: 0 24px 48px -8px rgba(30, 22, 18, 0.35);

  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --duration:   0.3s;
  --transition: var(--duration) var(--ease);
}