/* =========================================================
   MIHAI · Design Tokens v1.0
   Fonte única de verdade para cores, tipografia, raios,
   sombras e espaçamento. NÃO crie valores fora deste arquivo.
   ========================================================= */

/* ---------- Fontes (self-hosted, sem dependência externa) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("./fonts/PlusJakartaSans-VF.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("./fonts/Lora-VF.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Paleta primitiva ---------- */
  /* Navy (azul profundo) */
  --navy-950: #111A2B;
  --navy-900: #151E32;   /* COR DA MARCA · Azul profundo */
  --navy-800: #202C43;   /* painel sobre fundo escuro */
  --navy-750: #26344B;   /* destaque sobre painel */
  --navy-700: #394760;   /* linhas/bordas no escuro */
  --navy-600: #24324B;   /* texto principal no claro + logo no claro */

  /* Azul */
  --blue-700: #345685;   /* ação primária no claro */
  --blue-600: #577BAC;   /* seleção ativa */
  --blue-500: #7B97BE;   /* borda de seleção */
  --blue-300: #BDD4EF;   /* COR DA MARCA · Azul claro */
  --blue-100: #E5EDF8;
  --blue-50:  #EDF2FA;

  /* Dourado */
  --gold-400: #F2B66D;   /* COR DA MARCA · Dourado */
  --gold-300: #EFBB79;   /* botão dourado no claro */
  --gold-200: #F9E7CF;   /* chip/fundo dourado suave */
  --gold-100: #FBEFDE;
  --gold-50:  #FFF7E9;
  --gold-text: #8F6028;  /* texto sobre fundos dourados claros */
  --gold-ink:  #62441E;  /* texto sobre botão dourado */

  /* Neutros claros */
  --ivory:  #F2F4E9;     /* COR DA MARCA · Marfim (texto no escuro) */
  --cream:  #F6F3EC;     /* fundo do app */
  --paper:  #FFFEFA;     /* barra inferior, superfícies quentes */
  --white:  #FFFFFF;
  --line-light: #E6E4DF;
  --slate-500: #798395;  /* texto secundário no claro */
  --slate-300: #BAC7DA;  /* texto secundário no escuro */

  /* Apoio (uso restrito, ver DESIGN.md §3.4) */
  --lilac-300: #CCB9F0;
  --green-100: #E5EFEA;
  --green-600: #477361;
  --coral-300: #EFA889;

  /* ---------- Tipografia ---------- */
  --font-sans:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Escala marketing (LP, dossiê) */
  --fs-display: clamp(2.875rem, 5.5vw, 5.125rem); /* 46 → 82px */
  --fs-h2-mkt:  clamp(1.875rem, 3.4vw, 3.0625rem); /* 30 → 49px */
  --fs-h3-mkt:  1.375rem;   /* 22px */
  --fs-lead:    1.25rem;    /* 20px */
  --fs-big-num: clamp(2.3rem, 4vw, 3.75rem); /* números de destaque */

  /* Escala app (mobile-first) */
  --fs-h1: 1.875rem;   /* 30px */
  --fs-h2: 1.5625rem;  /* 25px */
  --fs-h3: 1.125rem;   /* 18px */
  --fs-body: 0.9375rem; /* 15px */
  --fs-sm: 0.8125rem;  /* 13px */
  --fs-xs: 0.6875rem;  /* 11px */
  --fs-eyebrow: 0.625rem; /* 10px */
  --fs-verse: 1.25rem; /* 20px · passagem bíblica (serif) */

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.55;

  --ls-display: -0.04em;
  --ls-head:    -0.03em;
  --ls-tight:   -0.02em;
  --ls-eyebrow: 0.12em;
  --ls-overline: 0.19em;

  /* ---------- Raios ---------- */
  --r-xs: 8px;
  --r-sm: 12px;   /* inputs, chips de tempo */
  --r-md: 14px;   /* botões */
  --r-lg: 20px;   /* tiles/cards no app */
  --r-xl: 24px;   /* cards marketing, cenas */
  --r-pill: 999px;

  /* ---------- Espaçamento (base 4) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ---------- Sombras ---------- */
  --shadow-tile:  0 4px 12px rgba(40, 56, 83, 0.04);
  --shadow-float: 0 5px 15px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 20px 90px rgba(0, 0, 0, 0.45);
  --shadow-device: 0 28px 90px rgba(0, 0, 0, 0.40);
  --shadow-pet:   drop-shadow(0 7px 5px rgba(52, 41, 28, 0.05));

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 5vw, 64px);
  --app-max: 430px;
}


/* ---------- Tema CLARO (produto) · padrão ----------
   Também pode ser forçado numa seção com data-theme="light". */
:root, [data-theme="light"] {
  --bg:            var(--cream);
  --surface:       var(--white);
  --surface-soft:  var(--blue-50);
  --surface-warm:  var(--gold-50);
  --text:          var(--navy-600);
  --text-muted:    var(--slate-500);
  --border:        var(--line-light);
  --primary:       var(--blue-700);
  --on-primary:    var(--white);
  --accent:        var(--gold-400);
  --accent-strong: var(--gold-300);
  --on-accent:     var(--gold-ink);
  --selected-bg:   var(--blue-50);
  --selected-bd:   var(--blue-500);
  --success-bg:    var(--green-100);
  --success-fg:    var(--green-600);
  --focus:         var(--gold-400);
  --logo:          var(--navy-600);
  --chip-bg:       var(--blue-50);
  --chip-fg:       #4B6D9B;
  --chip-gold-bg:  var(--gold-200);
  --chip-gold-fg:  var(--gold-text);
  --btn-gold-bg:   var(--gold-300);
  --btn-gold-fg:   var(--gold-ink);
  --btn-secondary-fg: var(--blue-700);
  --meter-track:   #E4E6E7;
  --focusbox-bg:   #F9F2E7;
  --focusbox-fg:   #806B50;
  --focusbox-bd:   var(--gold-300);

}

/* ---------- Tema ESCURO (marca, LP, dossiê) ----------
   Aplique com <body data-theme="dark"> ou numa seção.      */
[data-theme="dark"] {
  --bg:            var(--navy-900);
  --surface:       var(--navy-800);
  --surface-soft:  var(--navy-750);
  --surface-warm:  #3D3427;
  --text:          var(--ivory);
  --text-muted:    var(--slate-300);
  --border:        var(--navy-700);
  --primary:       var(--gold-400);
  --on-primary:    var(--navy-900);
  --accent:        var(--blue-300);
  --accent-strong: var(--gold-400);
  --on-accent:     var(--navy-900);
  --selected-bg:   var(--blue-300);
  --selected-bd:   var(--blue-300);
  --success-bg:    #2C4A3E;
  --success-fg:    #A9D3BF;
  --focus:         var(--gold-400);
  --logo:          var(--gold-400);
  --chip-bg:       #2C3C58;
  --chip-fg:       var(--blue-300);
  --chip-gold-bg:  #3D3427;
  --chip-gold-fg:  var(--gold-400);
  --btn-gold-bg:   var(--gold-400);
  --btn-gold-fg:   var(--navy-900);
  --btn-secondary-fg: var(--ivory);
  --meter-track:   var(--navy-700);
  --focusbox-bg:   var(--navy-750);
  --focusbox-fg:   var(--slate-300);
  --focusbox-bd:   var(--gold-400);
}

/* Seções com tema próprio herdam cor de texto correta */
[data-theme] { color: var(--text); }

/* ---------- Base mínima ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}