/* ==========================================================================
   LabChef Design System — Design Tokens
   Inspirado em Airbnb (Acolhimento Gastronômico), Linear (Alta Densidade) & Resend (Precisão Tipográfica)
   ========================================================================== */

:root {
  /* ── Canvas & Superfícies (Dark Theme Premium) ────────────────────────── */
  --bg-canvas: #0b0d11;
  --bg-surface: #131720;
  --bg-surface-elevated: #1a202c;
  --bg-surface-hover: #222a3a;
  --bg-surface-active: #2a3346;
  --bg-overlay: rgba(11, 13, 17, 0.85);

  /* ── Tipografia & Cores de Texto ───────────────────────────────────────── */
  --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-primary: #fcfdff;
  --text-secondary: #9aa2b4;
  --text-muted: #626a7e;
  --text-inverse: #0b0d11;

  /* ── Paleta de Acentos Gastronômicos ────────────────────────────────────── */
  --color-primary: #ff4d4f;            /* Tomate / Rausch (CTA principal) */
  --color-primary-hover: #e03c3e;
  --color-primary-subtle: rgba(255, 77, 79, 0.12);
  --color-primary-glow: rgba(255, 77, 79, 0.25);

  --color-success: #10b981;            /* Verde Ervas / Hortifruti / Concluído */
  --color-success-subtle: rgba(16, 185, 129, 0.12);

  --color-warning: #f59e0b;            /* Âmbar / Grãos / Atenção */
  --color-warning-subtle: rgba(245, 158, 11, 0.12);

  --color-protein: #6366f1;            /* Índigo / Açougue & Ovos */
  --color-protein-subtle: rgba(99, 102, 241, 0.12);

  --color-dairy: #06b6d4;              /* Ciano / Laticínios */
  --color-dairy-subtle: rgba(6, 182, 212, 0.12);

  --color-seasoning: #d97706;          /* Ocre / Temperos & Óleos */
  --color-seasoning-subtle: rgba(217, 119, 6, 0.12);

  /* ── Bordas & Divisores ─────────────────────────────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-primary: rgba(255, 77, 79, 0.4);

  /* ── Raios de Arredondamento (Soft Rounded) ────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* ── Sombras & Elevações ─────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px var(--color-primary-glow);

  /* ── Transições e Animações ─────────────────────────────────────────────── */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Dimensões de Layout ─────────────────────────────────────────────────── */
  --header-height: 64px;
  --bottom-nav-height: 68px;
  --max-content-width: 1080px;
}