/* =========================================================
   TONOFF Design System — Tokens v1.0
   Fonte única de verdade. Site e guia de estilo importam este arquivo.
   ========================================================= */

:root {
  /* ---------- Cores de marca (manual oficial) ---------- */
  --brand-turquesa:   #45C7C1;
  --brand-turquesa-claro: #7CD6D2;
  --brand-teal:       #1D9F99;
  --brand-laranja:    #FF8F15;
  --brand-sol:        #FCBB15;
  --brand-creme:      #F5F1E7;

  /* ---------- Escala "mar" (derivada para acessibilidade) ---------- */
  --mar-50:  #EEF8F7;
  --mar-100: #D5EFED;
  --mar-300: #7CD6D2;   /* = turquesa claro */
  --mar-400: #45C7C1;   /* = turquesa */
  --mar-500: #1D9F99;   /* = teal */
  --mar-700: #137A75;   /* texto/links sobre creme — 4,6:1 */
  --mar-800: #0F5C58;
  --mar-900: #0B3F3D;   /* texto forte e fundos escuros — 10,4:1 */
  --mar-950: #072A28;

  /* ---------- Escala "areia" (neutros quentes) ---------- */
  --areia-0:   #FFFFFF;
  --areia-50:  #FBF9F4;
  --areia-100: #F5F1E7; /* = creme */
  --areia-200: #EBE4D3;
  --areia-300: #D9CFB8;
  --areia-500: #9C9180;
  --areia-700: #5E574C; /* texto secundário — 6,4:1 sobre creme */
  --tinta:     #1F2A2A; /* texto principal — 13:1 sobre creme */

  /* ---------- Escala "sol" ---------- */
  --sol-300: #FCBB15;
  --sol-500: #FF8F15;
  --sol-700: #A65200;   /* laranja para texto sobre creme — 4,9:1 */

  /* ---------- Semânticos ---------- */
  --cor-fundo:          var(--areia-100);
  --cor-fundo-elevado:  var(--areia-50);
  --cor-fundo-invertido:var(--mar-900);
  --cor-texto:          var(--tinta);
  --cor-texto-suave:    var(--areia-700);
  --cor-texto-invertido:var(--areia-100);
  --cor-titulo:         var(--mar-900);
  --cor-link:           var(--mar-700);
  --cor-destaque:       var(--sol-700);
  --cor-borda:          var(--areia-200);
  --cor-borda-forte:    var(--areia-300);
  --cor-cta:            var(--brand-laranja);   /* sempre com texto --tinta */
  --cor-cta-hover:      #FFA23F;
  --cor-cta-texto:      var(--tinta);
  --cor-foco:           var(--brand-sol);
  --cor-sucesso:        #2E7D5B;
  --cor-erro:           #B3261E;

  /* ---------- Tipografia ---------- */
  --fonte-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --fonte-texto:   "Jost", "Helvetica Neue", Arial, sans-serif;

  /* escala fluida (mobile → desktop) */
  --txt-xs:   0.75rem;                                  /* 12 */
  --txt-sm:   0.875rem;                                 /* 14 */
  --txt-md:   1.0625rem;                                /* 17 — corpo */
  --txt-lg:   clamp(1.125rem, 1rem + .4vw, 1.3125rem);  /* 18–21 */
  --txt-xl:   clamp(1.375rem, 1.2rem + .8vw, 1.75rem);  /* 22–28 */
  --txt-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);  /* 28–44 */
  --txt-3xl:  clamp(2.25rem, 1.6rem + 3vw, 4.25rem);    /* 36–68 */
  --txt-hero: clamp(2.75rem, 1.8rem + 4.6vw, 6rem);     /* 44–96 */

  --peso-leve: 300;
  --peso-normal: 400;
  --peso-medio: 500;

  --altura-titulo: 1.08;
  --altura-texto: 1.65;
  --tracking-eyebrow: 0.28em;   /* ecoa "O F F  D A  R O T I N A" */
  --tracking-botao: 0.12em;

  /* ---------- Espaçamento (base 4) ---------- */
  --esp-1: 0.25rem;  --esp-2: 0.5rem;  --esp-3: 0.75rem; --esp-4: 1rem;
  --esp-5: 1.5rem;   --esp-6: 2rem;    --esp-7: 3rem;    --esp-8: 4rem;
  --esp-9: 6rem;     --esp-10: 8rem;
  --secao-y: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --largura-max: 1240px;
  --largura-texto: 62ch;

  /* ---------- Forma ---------- */
  --raio-sm: 6px;
  --raio-md: 14px;
  --raio-lg: 28px;            /* cantos generosos, como os cards do manual */
  --raio-pill: 999px;
  --borda: 1px solid var(--cor-borda);

  /* ---------- Sombra ---------- */
  --sombra-1: 0 1px 2px rgba(11,63,61,.06), 0 2px 8px rgba(11,63,61,.05);
  --sombra-2: 0 8px 30px rgba(11,63,61,.10);
  --sombra-3: 0 24px 60px rgba(11,63,61,.18);

  /* ---------- Movimento ---------- */
  --dur-rapida: 160ms;
  --dur-media: 320ms;
  --dur-lenta: 700ms;
  --ease-mar: cubic-bezier(.22,.61,.36,1);   /* entrada suave, "maré" */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-media: 0ms; --dur-lenta: 0ms; }
}