/* ============================================================================
   VITRINI — TOKENS DA PLATAFORMA "Consultoria & IA Aplicada"
   Marca: produto/agencia/design.md · paleta oficial: _marca_vitrini/pacote-design/paleta.css
   Derivados de texto: _gerador_propostas/marca.js:42-46 (implementação canônica)
   Superfícies escuras: _site_vitrini/index.html:37 (--card / --card-2, já em produção)
   Curvas/durações: sites/pet-style-arapongas/index.html:33-39 (tabela calibrada)

   LEI: componente NUNCA conhece hex. Estilize sempre por var(--v-*).
        var() SEM fallback de cor — se o token sumir, tem de quebrar visível.
        Importe ANTES de qualquer CSS de componente.
   TRAVA: --v-accent (âmbar) é LUZ. <=10% da área. NUNCA texto sobre fundo claro.
   ========================================================================== */

/* ---- Fonte: self-host, ZERO CDN (ver §5 do briefing) --------------------- */
@font-face{
  font-family:'Figtree';
  src:url('../fonts/figtree-latin.woff2') format('woff2');
  font-weight:100 900;          /* arquivo variável (tabela STAT presente)   */
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ===== INVARIANTES (não mudam entre temas) ============================= */

  /* -- Tipografia ------------------------------------------------------- */
  --v-font:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --v-font-mono: ui-monospace, 'Cascadia Code', Consolas, 'SFMono-Regular', Menlo, monospace;

  --v-fw-regular:400;   /* corpo               (manual)                      */
  --v-fw-label:500;     /* rótulo/eyebrow/descritor de submarca (manual)     */
  --v-fw-bold:800;      /* wordmark e títulos  (manual)                      */
  --v-fw-black:900;     /* display de hero — só em peça de venda             */

  /* Escala fluida. A MARCA não define escala numérica ([A PREENCHER] no
     design.md); esta deriva da régua Figtree/16px + pet-style:51-53.        */
  --v-fs-overline:.6875rem;  /* 11 — eyebrow, UPPERCASE + tracking           */
  --v-fs-caption:.75rem;     /* 12 — legenda/meta                            */
  --v-fs-small:.8125rem;     /* 13 — auxiliar, célula densa                  */
  --v-fs-body:1rem;          /* 16 — PISO: corpo nunca abaixo disto          */
  --v-fs-body-lg:1.0625rem;  /* 17 — corpo de leitura longa                  */
  --v-fs-h3:1.1875rem;       /* 19                                           */
  --v-fs-h2:clamp(1.55rem, 3.5vw, 2.25rem);
  --v-fs-h1:clamp(2rem, 5.2vw, 3.3rem);
  --v-fs-display:clamp(2.6rem, 7vw, 4.25rem);   /* hero de venda            */

  --v-lh-tight:1.08;   /* display                                           */
  --v-lh-snug:1.15;    /* headings (design.md:89)                           */
  --v-lh-body:1.5;     /* corpo (design.md:90)                              */
  --v-tracking-tight:-.02em;  /* títulos (design.md:89)                     */
  --v-tracking-wm:.005em;     /* wordmark (design.md:88)                    */
  --v-tracking-label:.09em;   /* eyebrow UPPERCASE (pet-style:78-79)        */
  --v-measure:68ch;           /* medida 45-75 caracteres (design.md:90)     */

  /* -- Espaço: base 8px, 8 degraus (03b:111) ---------------------------- */
  --v-s1:.25rem; --v-s2:.5rem; --v-s3:.75rem; --v-s4:1rem;
  --v-s5:1.5rem; --v-s6:2rem;  --v-s7:3rem;   --v-s8:4.5rem;

  /* -- Raio ESCALONADO por densidade (nunca "rounded-lg em tudo") -------- */
  --v-radius-xs:8px;    /* input, célula, chip denso                        */
  --v-radius-sm:12px;   /* botão                                            */
  --v-radius:18px;      /* card            (design.md:171)                  */
  --v-radius-lg:26px;   /* painel/modal    (design.md:171)                  */
  --v-radius-xl:28px;   /* card de painel  (design.md:171)                  */
  --v-radius-pill:999px;
  --v-radius-table:6px; /* tabela de dado: quase reta = densidade           */

  /* -- Movimento: tabela calibrada (pet-style:33-39) --------------------- */
  --v-ease-suave:cubic-bezier(.215,.61,.355,1);   /* power2.out — reveal/card */
  --v-ease-rapida:cubic-bezier(.25,.46,.45,.94);  /* power1.out — hover curto */
  --v-ease-mola:cubic-bezier(.34,1.56,.64,1);     /* back.out   — passa e volta */
  --v-ease-expo:cubic-bezier(.16,1,.3,1);         /* expo.out   — entrada forte */
  --v-ease-estado:cubic-bezier(.45,.05,.55,.95);  /* power1.inOut — troca de aba */
  --v-t-hover:.18s; --v-t-card:.26s; --v-t-reveal:.52s; --v-t-estado:.26s;
  --v-t-ui:.14s;    /* micro-estado de UI (botão, chip, nav)               */

  /* -- Camadas: declaradas, nunca chutadas no meio do arquivo ------------ */
  --v-z-nav:100; --v-z-sticky:200; --v-z-float:150; --v-z-overlay:900; --v-z-modal:1000;

  --v-maxw:1160px;      /* pet-style:44 / _site_vitrini:43                  */
  --v-maxw-app:1180px;  /* casca de aplicação (2 colunas)                   */

  /* ===== TEMA CLARO (default da PLATAFORMA: superfície de trabalho) =====
     O tema ESCURO é o herói da LP de venda (§4.3). O claro é o herói do
     produto, porque é o que se lê por hora seguida.                        */
  color-scheme: light;

  --v-bg:#F6F0E4;            /* creme OFICIAL — nunca branco puro            */
  --v-surface:#FDFAF3;       /* cremeAlto (marca.js:45) — card               */
  --v-surface-2:#F1EADB;     /* DERIVADO — zebra / th de tabela / faixa      */
  --v-surface-3:#EAE1CD;     /* DERIVADO — faixa mais funda.
                                ⛔ DECORATIVO: nao recebe texto <=13px nem
                                   borda de controle (ver medicao §4.4)      */
  --v-line:#DED5C2;          /* filete claro OFICIAL — divisor decorativo    */
  --v-line-strong:#8A8578;   /* pedra OFICIAL — borda de CONTROLE (>=3:1)    */

  --v-text:#10262B;          /* tinta = petróleo (marca.js:42)   13,87:1     */
  --v-text-muted:#4A5C60;    /* tintaSuave (marca.js:43)          6,19:1     */
  --v-text-subtle:#6E695C;   /* pedraForte (marca.js:44)          4,82:1     */

  --v-accent:#E9A13B;        /* ÂMBAR — LUZ. <=10%. NUNCA texto no claro.    */
  --v-accent-ink:#8A5300;    /* âmbar escuro (03b:105) p/ TEXTO   5,58:1     */
  --v-on-accent:#10262B;     /* texto sobre âmbar (design.md:73)  7,21:1     */
  --v-accent-tint:color-mix(in srgb, var(--v-accent) 16%, transparent);
  --v-ring:color-mix(in srgb, var(--v-accent) 45%, transparent);

  --v-wa:#0E7A41;            /* verdeWa (marca.js:46)             4,77:1     */
  --v-wa-strong:#0A6435;     /* 03b:100                                      */

  --v-success:#0E7A41;       /* = verdeWa (03b:105)               4,77:1     */
  --v-warning:#8A5300;       /* 03b:105 — também marca [A PREENCHER] 5,58:1  */
  --v-danger:#B23A22;        /* DERIVADO (terracota quente)       5,25:1     */
  --v-info:#2C5F73;          /* DERIVADO (petróleo dessaturado)   [ver §4.4] */

  /* Sombras QUENTES: rgba do petróleo + do âmbar. NUNCA preto puro.        */
  --v-shadow-sm:0 2px 10px rgba(16,38,43,.08), 0 1px 3px rgba(16,38,43,.05);
  --v-shadow:0 12px 34px rgba(16,38,43,.13), 0 4px 10px rgba(16,38,43,.07);
  --v-shadow-lg:0 30px 68px rgba(233,161,59,.22), 0 10px 24px rgba(16,38,43,.12);
}

/* ===== TEMA ESCURO — herói da LP; disponível na plataforma inteira =======
   Guardado com :not([data-theme="light"]) para que o toggle vença o SO.    */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --v-bg:#0B1A1E;            /* petróleo-fundo OFICIAL                     */
    --v-surface:#10262B;       /* petróleo OFICIAL — card                    */
    --v-surface-2:#16323A;     /* _site_vitrini:37 (--card)                  */
    --v-surface-3:#1B3A43;     /* _site_vitrini:37 (--card-2)                */
    --v-line:#2C4449;          /* filete escuro OFICIAL — divisor            */
    --v-line-strong:#8A8578;   /* pedra OFICIAL — borda de CONTROLE (>=3:1)  */

    --v-text:#F6F0E4;          /* creme OFICIAL                   15,67:1    */
    --v-text-muted:#ADBCBD;    /* _site_vitrini:41 (--on-dark-soft) 9,07:1   */
    --v-text-subtle:#8A8578;   /* pedra OFICIAL — SÓ sobre --v-bg  4,83:1    */

    --v-accent:#E9A13B;        /* âmbar: no escuro PODE ser texto  8,15:1    */
    --v-accent-ink:#E9A13B;    /* no escuro o próprio âmbar lê bem           */
    --v-on-accent:#10262B;
    --v-accent-tint:color-mix(in srgb, var(--v-accent) 18%, transparent);
    --v-ring:color-mix(in srgb, var(--v-accent) 50%, transparent);

    --v-wa:#25D366;            /* verde WhatsApp oficial          8,97:1     */
    --v-wa-strong:#1FB855;     /* DERIVADO — hover                           */

    --v-success:#7FD6A2;       /* DERIVADO                       10,20:1     */
    --v-warning:#F2B658;       /* _site_vitrini:38 (--ambar-2)    9,83:1     */
    --v-danger:#F08A6E;        /* DERIVADO                        7,25:1     */
    --v-info:#7FB2C4;          /* DERIVADO                        [ver §4.4] */

    /* No escuro a profundidade vem de SUPERFÍCIE + BORDA, não de sombra.   */
    --v-shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --v-shadow:0 2px 6px rgba(0,0,0,.42), 0 12px 30px -16px rgba(0,0,0,.65);
    --v-shadow-lg:0 10px 50px -18px rgba(0,0,0,.75);
  }
}

/* ===== OVERRIDES DO TOGGLE — precisam vencer o media query NOS DOIS SENTIDOS
   (é o erro nº1 de dark mode; o Coach App acerta em cg-tokens.css:161-195) */
:root[data-theme="light"]{
  color-scheme: light;
  --v-bg:#F6F0E4; --v-surface:#FDFAF3; --v-surface-2:#F1EADB; --v-surface-3:#EAE1CD;
  --v-line:#DED5C2; --v-line-strong:#8A8578;
  --v-text:#10262B; --v-text-muted:#4A5C60; --v-text-subtle:#6E695C;
  --v-accent:#E9A13B; --v-accent-ink:#8A5300; --v-on-accent:#10262B;
  --v-accent-tint:color-mix(in srgb, #E9A13B 16%, transparent);
  --v-ring:color-mix(in srgb, #E9A13B 45%, transparent);
  --v-wa:#0E7A41; --v-wa-strong:#0A6435;
  --v-success:#0E7A41; --v-warning:#8A5300; --v-danger:#B23A22; --v-info:#2C5F73;
  --v-shadow-sm:0 2px 10px rgba(16,38,43,.08), 0 1px 3px rgba(16,38,43,.05);
  --v-shadow:0 12px 34px rgba(16,38,43,.13), 0 4px 10px rgba(16,38,43,.07);
  --v-shadow-lg:0 30px 68px rgba(233,161,59,.22), 0 10px 24px rgba(16,38,43,.12);
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --v-bg:#0B1A1E; --v-surface:#10262B; --v-surface-2:#16323A; --v-surface-3:#1B3A43;
  --v-line:#2C4449; --v-line-strong:#8A8578;
  --v-text:#F6F0E4; --v-text-muted:#ADBCBD; --v-text-subtle:#8A8578;
  --v-accent:#E9A13B; --v-accent-ink:#E9A13B; --v-on-accent:#10262B;
  --v-accent-tint:color-mix(in srgb, #E9A13B 18%, transparent);
  --v-ring:color-mix(in srgb, #E9A13B 50%, transparent);
  --v-wa:#25D366; --v-wa-strong:#1FB855;
  --v-success:#7FD6A2; --v-warning:#F2B658; --v-danger:#F08A6E; --v-info:#7FB2C4;
  --v-shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --v-shadow:0 2px 6px rgba(0,0,0,.42), 0 12px 30px -16px rgba(0,0,0,.65);
  --v-shadow-lg:0 10px 50px -18px rgba(0,0,0,.75);
}

/* ===== PISO DE BASE (o que todo componente herda) ======================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0; background:var(--v-bg); color:var(--v-text);
  font-family:var(--v-font); font-size:var(--v-fs-body); line-height:var(--v-lh-body);
  font-weight:var(--v-fw-regular);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--v-font); font-weight:var(--v-fw-bold);
  line-height:var(--v-lh-snug); letter-spacing:var(--v-tracking-tight);
  margin:0 0 var(--v-s3); text-wrap:balance;
}
h1{font-size:var(--v-fs-h1)} h2{font-size:var(--v-fs-h2)} h3{font-size:var(--v-fs-h3)}
p{ margin:0 0 var(--v-s4); max-width:var(--v-measure); text-wrap:pretty; }
a{ color:var(--v-accent-ink); text-decoration:none; }
img{ max-width:100%; display:block; }
.mono{ font-family:var(--v-font-mono); font-variant-numeric:tabular-nums; }
.eyebrow{ font-weight:var(--v-fw-label); font-size:var(--v-fs-overline);
  text-transform:uppercase; letter-spacing:var(--v-tracking-label); color:var(--v-text-subtle); }

/* Foco visível em TUDO que recebe teclado (app.css:42-46) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--v-accent); outline-offset:2px; border-radius:var(--v-radius-xs);
}
/* Skip link (pet-style:58-59) */
.skip{position:absolute;left:-9999px;top:0;background:var(--v-text);color:var(--v-bg);
  padding:var(--v-s3) var(--v-s4);z-index:300;border-radius:0 0 var(--v-radius-xs) 0}
.skip:focus{left:0}

/* Controle: a borda de repouso usa --v-line-strong (>=3:1) e o foco usa anel */
input,select,textarea{
  width:100%; padding:11px 13px; font:inherit; font-size:var(--v-fs-body);
  border:1px solid var(--v-line-strong); border-radius:var(--v-radius-xs);
  background:var(--v-surface); color:var(--v-text);
  transition:border-color var(--v-t-ui) var(--v-ease-rapida),
             box-shadow  var(--v-t-ui) var(--v-ease-rapida);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--v-accent); box-shadow:0 0 0 3px var(--v-ring);
}

/* Motion: zera as durações, mas cada animação que CARREGA informação
   precisa do seu próprio fallback estático (app.css:705, 774, 945). */
@media (prefers-reduced-motion: reduce){
  :root{ --v-t-hover:0s; --v-t-card:0s; --v-t-reveal:0s; --v-t-estado:0s; --v-t-ui:0s; }
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}