/* ============================================================================
   tokens.css — sistema de design tokens ROCCO (Etapa 1)
   Fonte única da paleta Jatobase (claro = padrão / escuro via [data-theme="dark"])
   e da tipografia base (Inter).
   Carregar ANTES de qualquer outro CSS da página (header-full.css incluso).
   ========================================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== Paleta Jatobase — modo claro (OFICIAL / padrão) ===== */
:root,
:root[data-theme="light"] {
  --bg: #FBF8F3;
  --card: #FFFFFF;
  --card-alt: #F1E7DA;
  --ink: #2E1F17;
  --ink-light: #2E1F17;
  --ink-mute: #6B5B4E;
  --ink-mute2: #9C8B7A;
  --ink-soft: #3A2A20;
  --accent: #235048;
  --accent-dark: #235048;
  --accent-light: rgba(35, 80, 72, 0.10);
  --accent-medium: rgba(35, 80, 72, 0.18);
  --on-accent: #FFFFFF;
  --emerald: #235048;
  --danger: #C1502E;
  --line: rgba(46, 31, 23, 0.10);
  --line-strong: rgba(46, 31, 23, 0.18);
  --mountains-base: #F5EFE6;
  --mountains-back: #E3D9C8;
  --mountains-mid: #D5C7B0;
  --mountains-front: #C0AD92;
  --mountains-fog-rgb: 245, 239, 230;
  --header-bg: rgba(251, 248, 243, 0.88);
  --header-pill-bg: rgba(46, 31, 23, 0.06);
}

/* ===== Paleta Jatobase — modo escuro ===== */
:root[data-theme="dark"] {
  --bg: #1E1510;
  --card: #2E1F17;
  --card-alt: #3A2A20;
  --ink: #F5EFE6;
  --ink-light: #FFFFFF;
  --ink-mute: #C9B9A6;
  --ink-mute2: #9C8B7A;
  --ink-soft: #E3D9C8;
  --accent: #D9A441;
  --accent-dark: #E8B95A;
  --accent-light: rgba(217, 164, 65, 0.14);
  --accent-medium: rgba(217, 164, 65, 0.26);
  --on-accent: #2E1F17;
  --emerald: #235048;
  --danger: #E0704A;
  --line: rgba(245, 239, 230, 0.10);
  --line-strong: rgba(245, 239, 230, 0.18);
  --mountains-base: #1A110C;
  --mountains-back: #3A2A20;
  --mountains-mid: #2E1F17;
  --mountains-front: #241812;
  --mountains-fog-rgb: 26, 17, 12;
  --header-bg: rgba(30, 21, 16, 0.88);
  --header-pill-bg: rgba(245, 239, 230, 0.08);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
  overflow-x: hidden;
  max-width: 100%;
  background: var(--mountains-base);
}

body {
  background: var(--mountains-base);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-x: none;
}

h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

a, button, input, textarea, select {
  touch-action: manipulation;
}