/* ============================================================
   Dra. Karol Thé · Design Tokens · Site
   v.07 · 13/10/2026 · Verk Digital

   Camada de site sobre o sistema do aplicativo.
   Rodada 4, 04/10/2026: o Ouro suave #DAB24F substitui o champanhe.
     · verde floresta, branco, ouro suave e sálvia. Nada fora disso é cor de marca
     · fundo claro é o padrão. Faixa escura só no rodapé
     · botão dourado com rótulo verde é o principal em qualquer fundo
     · dourado nunca é texto, link nem ícone em fundo claro
     · botão verde com rótulo branco é a ação secundária e o botão sobre a sálvia
     · v.07 (13/10): texto e interface em Instrument Sans, como no sistema
       do aplicativo e no documento da Rodada 4 (pedido da Dra. Karol, 10/10)
     · três famílias: Poiret One (display), Instrument Sans (texto e interface),
       Instrument Serif reta (só a citação, sem itálico)
   ============================================================ */

/* ---------- Fontes hospedadas no próprio domínio (LGPD) ---------- */
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/PoiretOne-Regular.latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/PoiretOne-Regular.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/InstrumentSans-var.latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/InstrumentSans-var.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InstrumentSerif-Regular.latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InstrumentSerif-Regular.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Marca: quatro cores ---------- */
  --brand-forest:         #1d2b1c;  /* primária */
  --brand-white:          #ffffff;  /* base */
  --gold-500:             #dab24f;  /* destaque */
  --sage-100:             #d8e5d7;  /* apoio */

  --brand-verde-original: #375439;  /* arquivo da cliente. Só impresso */
  --brand-verde-profundo: #112b23;  /* arquivo da cliente. Só impresso */
  --slate-500:            #698486;  /* fio, ícone. Nunca corpo de texto */
  --green-500:            #52986d;  /* verde de sinal */

  /* ---------- Superfícies ---------- */
  --surface:           #f2f6f0;
  --surface-raised:    #ffffff;
  --surface-sunken:    #e8eee6;
  --surface-tint:      #d8e5d7;
  --surface-inverse:   #1d2b1c;
  --surface-accent:    #fbf3dc;
  --surface-attention: #ffedd5;
  --surface-positive:  #e6f1e8;
  --surface-critical:  #f7cbcf;

  /* ---------- Texto ---------- */
  --ink:               #1d2b1c;
  --ink-muted:         #526769;
  --ink-inverse:       #ffffff;
  --ink-inverse-muted: #d8e5d7;

  /* ---------- Ação ---------- */
  --accent:              #dab24f;  /* ouro. Botão principal em qualquer fundo */
  --accent-hover:        #dab24f;  /* mesmo ouro. O hover é anel interno */
  --accent-text:         #1d2b1c;  /* verde. Dourado nunca é texto em fundo claro */
  --on-accent:           #1d2b1c;
  --accent-strong:       #1d2b1c;  /* ação secundária forte e botão sobre a sálvia */
  --accent-strong-hover: #2c3f2a;
  --on-accent-strong:    #ffffff;
  --gold-line:           #dab24f;  /* sublinhado e fio. Só detalhe, nunca texto */
  --focus-ring:          #1d2b1c;  /* verde no claro. Sobre o verde, dourado */

  /* ---------- Estados ---------- */
  --positive:      #3b7150;
  --positive-fill: #52986d;
  --attention:     #b84a0e;
  --attention-fill:#d4621a;
  --critical:      #a51e21;
  --critical-fill: #c9302d;

  /* ---------- Fio e véu ---------- */
  --border:        #e2e9de;
  --border-strong: #698486;
  --scrim:         rgba(29, 43, 28, 0.40);
  --glass:         rgba(255, 255, 255, 0.72);

  /* ---------- Tipografia ---------- */
  --font-display: 'Poiret One', 'Century Gothic', 'Avenir Next', sans-serif;
  --font-sans:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-editorial: 'Instrument Serif', Georgia, serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Espaço. Base 4px ---------- */
  --space-1:  4px;   --space-2:  8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;   --space-6: 24px;   --space-8: 32px;  --space-10: 40px;
  --space-12: 48px;  --space-16: 64px;  --space-24: 96px;

  /* ---------- Forma ---------- */
  --radius-xs: 6px;   --radius-sm: 10px;  --radius-md: 14px;
  --radius-lg: 20px;  --radius-xl: 26px;  --radius-2xl: 36px;
  --radius-full: 999px;

  /* ---------- Medidas ---------- */
  --tap-min: 44px;
  --control-md: 40px;
  --control-lg: 50px;
  --icon-sm: 16px;  --icon-md: 20px;  --icon-lg: 28px;
  --content-max: 1120px;
  --reading-max: 680px;

  /* ---------- Sombra ---------- */
  --shadow-sm: 0 1px 2px rgba(29,43,28,0.06), 0 1px 1px rgba(29,43,28,0.04);
  --shadow-md: 0 4px 14px rgba(29,43,28,0.08), 0 1px 2px rgba(29,43,28,0.05);
  --shadow-lg: 0 14px 36px rgba(29,43,28,0.12), 0 2px 6px rgba(29,43,28,0.06);

  /* ---------- Movimento ---------- */
  --dur-press: 120ms;  --dur-micro: 160ms;  --dur-menu: 240ms;
  --dur-reveal: 300ms; --dur-surface: 320ms; --dur-sheet: 400ms;
  --dur-stagger: 80ms;
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-sheet:  cubic-bezier(0.32, 0.72, 0, 1);
}

/* Tema Noite. Portal e aplicativo. O site institucional não usa.
   O mulberry permanece aqui: a cliente liberou rosa no app, não no site. */
:root[data-theme="dark"] {
  --surface:         #141b13;
  --surface-sunken:  #0d120c;
  --surface-raised:  #1d2b1c;
  --surface-tint:    #233020;
  --surface-inverse: #d8e5d7;

  --ink:               #eef3ec;
  --ink-muted:         #a8bcb4;
  --ink-inverse:       #1d2b1c;
  --ink-inverse-muted: #46603f;

  --accent:       #c97ba1;
  --accent-hover: #d691b2;
  --accent-text:  #e3a6c1;
  --on-accent:    #1d2b1c;
  --focus-ring:   #e3a6c1;

  --positive:  #7fc397;
  --attention: #e3b169;
  --critical:  #f0918d;

  --border:        #2b3a29;
  --border-strong: #66837c;
  --scrim:         rgba(4, 8, 4, 0.60);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.50);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.55);
  --shadow-lg: 0 14px 36px rgba(0,0,0,0.65);
}

/* Tipografia em telas pequenas. O corpo não reduz: público 40+. */
@media (max-width: 767px) {
  :root { --space-16: 16px; }
}

/* Movimento reduzido. Posição e escala saem, opacidade fica. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 60ms;   --dur-micro: 80ms;   --dur-menu: 120ms;
    --dur-reveal: 150ms; --dur-surface: 160ms; --dur-sheet: 200ms;
    --dur-stagger: 40ms;
  }
}