/* FoodClone — tokens.css · cores da marca, escala fluida, fontes, espaçamento */
:root {
  /* Paleta primitiva — seis cores, apenas seis */
  --color-cream:     #F5EDDF;
  --color-tomato:    #D94F2A;
  --color-espresso:  #1A1612;
  --color-mango:     #F4A100;
  --color-bruise:    #1E3A52;
  --color-sage-deep: #5A6B47;

  /* Derivações via color-mix em oklch */
  --color-cream-light: color-mix(in oklch, var(--color-cream) 92%, white);
  --color-cream-deep:  color-mix(in oklch, var(--color-cream) 90%, var(--color-espresso));
  --color-cream-soft:  color-mix(in oklch, var(--color-cream) 96%, var(--color-espresso));

  --color-espresso-mid:  color-mix(in oklch, var(--color-espresso) 85%, var(--color-cream));
  --color-espresso-soft: color-mix(in oklch, var(--color-espresso) 70%, var(--color-cream));

  --color-tomato-light: color-mix(in oklch, var(--color-tomato) 70%, var(--color-cream-light));
  --color-tomato-deep:  color-mix(in oklch, var(--color-tomato) 80%, var(--color-espresso));

  --color-mango-light: color-mix(in oklch, var(--color-mango) 70%, var(--color-cream-light));
  --color-mango-deep:  color-mix(in oklch, var(--color-mango) 80%, var(--color-tomato));

  --color-bruise-light: color-mix(in oklch, var(--color-bruise) 80%, var(--color-cream));
  --color-bruise-deep:  color-mix(in oklch, var(--color-bruise) 88%, black);

  --color-sage-light: color-mix(in oklch, var(--color-sage-deep) 70%, var(--color-cream-light));
  --color-sage-soft:  color-mix(in oklch, var(--color-sage-deep) 16%, var(--color-cream-light));

  /* Semânticos */
  --surface-base:     var(--color-cream);
  --surface-elevated: var(--color-cream-light);
  --surface-sunken:   var(--color-cream-deep);
  --text-primary:     var(--color-espresso);
  --text-secondary:   var(--color-espresso-mid);
  --text-tertiary:    var(--color-espresso-soft);
  --action-primary:   var(--color-tomato);

  --border-subtle:  color-mix(in oklch, var(--color-espresso) 12%, transparent);
  --border-default: color-mix(in oklch, var(--color-espresso) 24%, transparent);

  /* Sombras — Espresso aquecido, nunca preto puro */
  --shadow-resting:  0 1px 2px rgba(26,22,18,.06);
  --shadow-raised:   0 4px 12px rgba(26,22,18,.08), 0 1px 2px rgba(26,22,18,.04);
  --shadow-floating: 0 8px 24px rgba(26,22,18,.10), 0 2px 4px rgba(26,22,18,.04);
  --shadow-lifted:   0 16px 40px rgba(26,22,18,.12), 0 4px 8px rgba(26,22,18,.06);
  --shadow-tomato-soft: 0 4px 12px rgba(217,79,42,.18);
  --shadow-tomato-deep: 0 8px 24px rgba(217,79,42,.28);
  --shadow-mango-deep:  0 12px 32px rgba(244,161,0,.24);
  --highlight-top: inset 0 1px 0 rgba(255,251,244,.40);

  /* Tipografia */
  --font-display: 'Inter Tight', 'Inter', sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --font-display-2xl: clamp(3rem, 6.4vw + 1rem, 6rem);
  --font-display-xl:  clamp(2.1rem, 4vw + 1rem, 3.5rem);
  --font-display-lg:  clamp(1.5rem, 2.5vw + .5rem, 2rem);
  --font-body-xl: clamp(1.12rem, .6vw + 1rem, 1.3rem);
  --font-body-lg: 1.1rem;
  --font-body-md: 1rem;
  --font-body-sm: .875rem;
  --font-body-xs: .75rem;
  --font-eyebrow: .85rem;

  --tracking-display: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-eyebrow:  0.14em;
  --leading-display: 1.04;
  --leading-normal:  1.55;
  --leading-relaxed: 1.65;

  /* Espaço — base 8 */
  --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;  --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem;   --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;  --space-20: 5rem;  --space-24: 6rem;  --space-32: 8rem;
  --space-40: 10rem; --space-48: 12rem;

  --container-narrow: 800px;
  --container-default: 1200px;
  --container-wide: 1440px;

  /* Forma */
  --radius-sm: .625rem; --radius-md: 1rem; --radius-lg: 1.5rem;
  --radius-xl: 1.75rem; --radius-2xl: 2.5rem; --radius-pill: 9999px;

  /* Movimento */
  --duration-fast: 160ms; --duration-normal: 240ms; --duration-relaxed: 360ms;
  --duration-slow: 480ms; --duration-cinematic: 720ms; --duration-epic: 1200ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-out-back: cubic-bezier(.34,1.4,.64,1);
  --ease-meditative: cubic-bezier(.45,.05,.55,.95);

  /* Noite — transição de temperatura da página */
  --page-bg: var(--color-cream);
}