/* ==========================================================================
   SmartCalc Fit PRO — Design Tokens
   Sistema de cores, tipografia e espaçamento compartilhado por todas as páginas.
   Conceito: cada macronutriente tem sua própria cor de identidade — a paleta
   NASCE da própria função do produto (proteína, carboidrato, gordura), não é
   decorativa. O "prato" de macros é o elemento-assinatura visual do produto.
   ========================================================================== */

:root {
  /* ---- Superfícies (tema claro) ---- */
  --bg: #F4F7F2;           /* verde-sálvia muito claro, não branco puro */
  --bg-elevated: #FFFFFF;
  --surface: #EAF0E6;
  --border: #D9E2D3;
  --ink: #142019;          /* quase-preto com base verde, não neutro puro */
  --ink-muted: #4B5A50;
  --ink-faint: #7C8B80;

  /* ---- Cores de identidade dos macros (usadas em todo o produto) ---- */
  --protein: #2F6F62;      /* teal profundo — proteína */
  --protein-soft: #DCEBE6;
  --carb: #E8A23B;         /* mango/dourado — carboidrato */
  --carb-soft: #FBEBD2;
  --fat: #B5527A;          /* ameixa/berry — gordura */
  --fat-soft: #F5DFE8;
  --fiber: #6E8B3D;        /* verde-oliva — fibra */

  /* ---- Ação / marca ---- */
  --brand: #1F5C4E;        /* teal-floresta — cor primária de marca */
  --brand-ink: #FFFFFF;
  --accent: #E8A23B;       /* mesmo tom do carboidrato, reforça o sistema */
  --danger: #C0432F;
  --success: #2F6F62;

  /* ---- Tipografia ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Forma / elevação ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-card: 0 1px 2px rgba(20, 32, 25, 0.04), 0 8px 24px -8px rgba(20, 32, 25, 0.10);
  --shadow-pop: 0 4px 8px rgba(20, 32, 25, 0.06), 0 16px 40px -12px rgba(20, 32, 25, 0.18);
}

/* ---- Tema escuro ---- */
:root[data-theme="dark"] {
  --bg: #10160F;
  --bg-elevated: #17201A;
  --surface: #1D2820;
  --border: #2A362D;
  --ink: #EAF1E9;
  --ink-muted: #A9BAAE;
  --ink-faint: #71877A;

  --protein-soft: #1C3833;
  --carb-soft: #3A2E1A;
  --fat-soft: #3A2130;

  --brand: #4FA890;
  --brand-ink: #0B1410;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-pop: 0 4px 8px rgba(0,0,0,0.35), 0 16px 40px -12px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  transition: background 0.25s ease, color 0.25s ease;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
}

.font-mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--carb-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Utilitários de macro (reutilizados em várias páginas) ---- */
.chip-protein { background: var(--protein-soft); color: var(--protein); }
.chip-carb    { background: var(--carb-soft); color: var(--carb); }
.chip-fat     { background: var(--fat-soft); color: var(--fat); }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }