/* ==========================================================================
   00 · TOKENS
   Fonte unica de verdade do sistema. Nada de hex solto em outro arquivo.
   ========================================================================== */

:root{

  /* --- ACENTOS · constantes nos dois modos --------------------------------
     A tese: praia ao meio-dia e cidade as 23h usam as MESMAS cores,
     so muda a luz atras delas. Por isso estes quatro nunca mudam. */
  --mf-rosa:      #FF2E88;   /* primaria  · marca, links, enfase           */
  --mf-agua:      #00CFE0;   /* secundaria · dados, datas, metadados       */
  --mf-sol:       #FFC01E;   /* destaque raro · alerta, grifo              */
  --mf-violeta:   #6B2BF0;   /* terciaria · diagramas, terceira serie      */

  /* variantes de contraste para texto pequeno sobre fundo claro */
  --mf-rosa-texto:   #D6006E;
  --mf-agua-texto:   #007A85;

  /* --- BASES ------------------------------------------------------------- */
  --mf-branco:    #FFFFFF;
  --mf-asfalto:   #070A14;   /* azul-noite, nunca preto puro               */

  /* --- MODO PRAIA (padrao) ----------------------------------------------- */
  --mf-bg:        #FFFFFF;
  --mf-surface:   #F1F5FA;
  --mf-ink:       #0A0E1A;
  --mf-muted:     #616C82;
  --mf-line:      rgba(10, 14, 26, .13);
  --mf-link:      var(--mf-rosa-texto);
  --mf-meta:      var(--mf-agua-texto);
  --mf-glow:      0 0 0 transparent;
  --mf-shadow:    0 20px 44px -26px rgba(10, 14, 26, .45);
  --mf-btn-texto: #FFFFFF;

  /* --- TIPOGRAFIA -------------------------------------------------------- */
  --mf-font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mf-font-body:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mf-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --mf-peso-display: 800;
  --mf-track-display: -.035em;
  --mf-track-mono: .14em;

  /* escala fluida · minimo mobile → maximo desktop */
  --mf-t-h1: clamp(2.4rem, 6.4vw, 4.9rem);
  --mf-t-h2: clamp(1.85rem, 4vw, 2.9rem);
  --mf-t-h3: clamp(1.45rem, 2.8vw, 1.95rem);
  --mf-t-h4: 1.3rem;
  --mf-t-corpo: 1.0625rem;   /* 17px */
  --mf-t-lead: 1.25rem;
  --mf-t-mono: .72rem;

  --mf-lh-display: .98;
  --mf-lh-corpo: 1.62;

  /* --- ESPACO E FORMA ---------------------------------------------------- */
  --mf-raio: 14px;
  --mf-raio-p: 8px;
  --mf-faixa: 10px;          /* espessura padrao das faixas de cor          */
  --mf-medida: 66ch;         /* largura maxima de texto corrido             */
  --mf-transicao: .45s cubic-bezier(.4, 0, .2, 1);
}

/* --- MODO CIDADE ---------------------------------------------------------
   Mesma paleta, outra luz. O brilho so existe aqui: neon precisa de escuro
   para ser neon. No claro ele vira borrao. */
html[data-mf-modo="cidade"]{
  --mf-bg:        #070A14;
  --mf-surface:   #101728;
  --mf-ink:       #EDF1FB;
  --mf-muted:     #8994AE;
  --mf-line:      rgba(237, 241, 251, .16);
  --mf-link:      var(--mf-rosa);
  --mf-meta:      var(--mf-agua);
  --mf-glow:      0 0 22px;
  --mf-shadow:    0 20px 50px -20px rgba(0, 0, 0, .9);
}

/* Sem JS e sem escolha salva: respeita a preferencia do sistema. */
@media (prefers-color-scheme: dark){
  html:not([data-mf-modo]){
    --mf-bg:      #070A14;
    --mf-surface: #101728;
    --mf-ink:     #EDF1FB;
    --mf-muted:   #8994AE;
    --mf-line:    rgba(237, 241, 251, .16);
    --mf-link:    var(--mf-rosa);
    --mf-meta:    var(--mf-agua);
    --mf-glow:    0 0 22px;
    --mf-shadow:  0 20px 50px -20px rgba(0, 0, 0, .9);
  }
}

/* --- PONTE PARA O DIVI 5 -------------------------------------------------
   O Divi 5 expoe as quatro cores de destaque como --gcid-*-color.
   Aqui elas passam a apontar para os tokens acima, entao qualquer modulo
   que use "Primary/Secondary/Heading/Body" ja nasce na identidade certa.
   As cores criadas por voce no Variable Manager recebem um ID proprio;
   por isso o README manda cadastrar as quatro na mao, com estes valores. */
:root,
html[data-mf-modo="cidade"]{
  --gcid-primary-color:   var(--mf-rosa);
  --gcid-secondary-color: var(--mf-agua);
  --gcid-heading-color:   var(--mf-ink);
  --gcid-body-color:      var(--mf-ink);
}