/* =============================================================================
   Ñ CONECTA · TEMA DE COR
   n.conectaplural.com.br · Profa. Priscila Gomes Santos
   Versão 0.1 · 20/09/2026
   -----------------------------------------------------------------------------
   UMA arquitetura, QUATRO luzes. A estrutura (pedra, raio, vidro, tipografia,
   ritmo) NUNCA muda entre as seções — só o acento e o campo de luz mudam.

     .n-conecta                  a pedra: base comum, neutra, sem pigmento
     .n-conecta.eixo--casa       institucional (home, navegação) · PELTRE
     .n-conecta.eixo--lengua     Lengua Española · VERDE
     .n-conecta.eixo--literatura Literatura Latinoamericana · ACHIOTE (urucum)
     .n-conecta.eixo--recursos   Recursos Compartidos · AÑIL (azul maya)

   Modo claro: acrescentar data-tema="claro" no <html> ou no próprio elemento.

   -----------------------------------------------------------------------------
   POR QUE ESTAS CORES
   Nenhuma é invenção: todas são matéria que a América produziu e exportou.
     Verde    — jade, a pedra que para maias e astecas valia mais que o ouro.
     Achiote  — urucum, pigmento de corpo e tempero, do México ao Brasil.
     Añil     — índigo/azul maya, corante exportado pela América Central,
                o azul de Bonampak que não desbota há mil anos.
     Peltre   — sem pigmento: a casa não toma partido.
   NÃO se usa amarelo+vermelho de bandeira: essa é a Espanha, e este site é de
   Lengua Española E Literatura Latinoamericana. Hispânico não é sinônimo de
   espanhol europeu.

   -----------------------------------------------------------------------------
   AS TRÊS REGRAS DO SISTEMA
   1. Um acento por tela. Os eixos só convivem na home, onde conviver é a
      assinatura da marca.
   2. A estrutura não muda com o eixo — só a luz muda.
   3. O componente lê o contrato semântico (--accent-primary), nunca o hex.
   ============================================================================= */


/* =============================================================================
   1 · PRIMITIVOS — as escalas cruas. Componente NUNCA lê daqui.
   ============================================================================= */
:root{
  /* --- PEDRA · a base comum, grafite mineral neutro --- */
  --p-pedra-950:#0C0E0E;
  --p-pedra-900:#111414;
  --p-pedra-850:#151818;
  --p-pedra-800:#1A1E1E;
  --p-pedra-700:#232828;
  --p-pedra-600:#2C3232;
  --p-pedra-500:#3A4341;
  --p-pedra-400:#5A6462;
  --p-pedra-300:#8E9694;
  --p-pedra-200:#B6BDBB;
  --p-pedra-100:#E8EBEA;

  /* --- PELTRE · a casa (institucional) --- */
  --p-peltre-700:#3E4746;
  --p-peltre-600:#5A6462;
  --p-peltre-400:#7E8886;
  --p-peltre-300:#C2CAC7;
  --p-peltre-200:#DDE3E0;
  --p-peltre-100:#E2E7E5;

  /* --- VERDE · Lengua Española ---------------------------------------------
     PADRÃO = esmeralda (o ponto exato entre jade e selva).
     Para trocar por jade ou selva, troque apenas este bloco de seis linhas:
       JADE    #0D4A3E #12604F #1A7A64 #45B598 #7DD3B8 #BFEBDC
       SELVA   #073B25 #0C5735 #12764B #28A46B #66DBA0 #B8F0D3
     ------------------------------------------------------------------------ */
  --p-verde-800:#0A4231;
  --p-verde-700:#0F5B42;
  --p-verde-600:#167857;   /* ação */
  --p-verde-400:#36AC81;
  --p-verde-300:#71D7AC;   /* texto sobre escuro */
  --p-verde-200:#BBEDD7;

  /* --- ACHIOTE (urucum) · Literatura Latinoamericana --- */
  --p-achiote-900:#4F1A0E;
  --p-achiote-700:#7A2A18;
  --p-achiote-600:#B5452B;  /* ação */
  --p-achiote-400:#DC7351;
  --p-achiote-300:#F0A585;  /* texto sobre escuro */
  --p-achiote-200:#FAD5C4;

  /* --- AÑIL (azul maya) · Recursos Compartidos --- */
  --p-anil-950:#0C1C2C;
  --p-anil-800:#12283D;
  --p-anil-700:#1E3E5C;
  --p-anil-600:#2B5B84;    /* ação */
  --p-anil-400:#5A8CB8;
  --p-anil-300:#A8C6DE;    /* texto sobre escuro */
  --p-anil-200:#D6E6F1;

  /* --- PAPEL · o modo claro --- */
  --p-papel-50:#FFFEFB;
  --p-papel-100:#F8F6F2;
  --p-papel-200:#F2EFE9;
  --p-papel-300:#EAE6DE;
  --p-papel-400:#E0DBD1;
  --p-tinta:#101413;
  --p-tinta-2:#4B5452;
  --p-tinta-3:#5F6866;
}


/* =============================================================================
   2 · A PEDRA — contrato semântico comum (modo escuro)
   ============================================================================= */
.n-conecta{
  --background-deep:    var(--p-pedra-950);
  --background-canvas:  var(--p-pedra-900);
  --background-subtle:  var(--p-pedra-850);
  --surface-1:          #171B1B;
  --surface-2:          var(--p-pedra-800);
  --surface-3:          var(--p-pedra-700);
  --surface-elevated:   var(--p-pedra-600);

  --text-primary:       var(--p-pedra-100);
  --text-secondary:     var(--p-pedra-200);
  --text-muted:         var(--p-pedra-300);
  --text-on-accent:     #FFFFFF;

  --border-subtle:      rgba(232,235,234,.065);
  --border-default:     rgba(232,235,234,.09);

  --surface-veu:        linear-gradient(158deg,rgba(255,255,255,.045),rgba(255,255,255,0) 48%);
  --glass-tint-clear:   rgba(35,40,40,.34);
  --glass-tint-liquid:  rgba(26,30,30,.54);
  --glass-tint-frosted: rgba(17,20,20,.76);

  --raio-placa:     clamp(20px,2vw,28px);
  --raio-cartao:    20px;
  --raio-controle:  999px;
  --transicao:      320ms cubic-bezier(.2,.72,.2,1);

  color: var(--text-primary);
  background-color: var(--background-canvas);
  background-image: var(--campo-atmosfera);
}


/* =============================================================================
   3 · OS QUATRO EIXOS (modo escuro)
   ============================================================================= */

/* --- A CASA · peltre. O botão é osso claro, não cinza apagado. ------------- */
.n-conecta.eixo--casa{
  --accent-primary:  var(--p-peltre-200);
  --accent-hover:    var(--p-peltre-300);
  --accent-active:   #A9B2AF;
  --text-on-accent:  #121615;
  --accent-text:     var(--p-peltre-300);
  --accent-luz:      var(--p-peltre-400);
  --accent-muted:    rgba(194,202,199,.09);
  --border-strong:   rgba(194,202,199,.20);
  --border-glass:    rgba(194,202,199,.24);
  --border-focus:    var(--p-peltre-300);
  --surface-selected:rgba(194,202,199,.10);
  /* a assinatura da marca: os três eixos acesos no mesmo campo */
  --campo-atmosfera:
    radial-gradient(50rem 36rem at 80% -10%, rgba(54,172,129,.15), transparent 62%),
    radial-gradient(44rem 32rem at 50% 108%, rgba(220,115,81,.12), transparent 62%),
    radial-gradient(44rem 32rem at 6% 104%,  rgba(90,140,184,.12), transparent 62%),
    radial-gradient(58rem 42rem at 50% 44%,  rgba(44,50,50,.88),   transparent 70%),
    linear-gradient(176deg,#1A1E1E 0%,#131616 46%,#0C0E0E 100%);
  --glow-subtle: 0 0 0 1px rgba(194,202,199,.06), 0 8px 32px rgba(0,0,0,.20);
}

/* --- LENGUA ESPAÑOLA · verde ---------------------------------------------- */
.n-conecta.eixo--lengua{
  --accent-primary:  var(--p-verde-600);
  --accent-hover:    var(--p-verde-700);
  --accent-active:   var(--p-verde-800);
  --text-on-accent:  #FFFFFF;
  --accent-text:     var(--p-verde-300);
  --accent-luz:      var(--p-verde-400);
  --accent-suave:    var(--p-verde-200);
  --accent-muted:    rgba(54,172,129,.12);
  --border-strong:   rgba(113,215,172,.20);
  --border-glass:    rgba(113,215,172,.26);
  --border-focus:    var(--p-verde-300);
  --surface-selected:rgba(54,172,129,.12);
  --campo-atmosfera:
    radial-gradient(64rem 44rem at 82% -10%, rgba(54,172,129,.20),  transparent 62%),
    radial-gradient(48rem 34rem at 6% 104%,  rgba(113,215,172,.07), transparent 62%),
    radial-gradient(70rem 50rem at 50% 44%,  rgba(39,52,47,.88),    transparent 70%),
    linear-gradient(176deg,#17221D 0%,#121A16 46%,#0C0E0E 100%);
  --glow-subtle: 0 0 0 1px rgba(54,172,129,.07), 0 8px 32px rgba(54,172,129,.05);
  --glow-active: 0 0 0 1px rgba(113,215,172,.18), 0 10px 38px rgba(54,172,129,.11);
}

/* --- LITERATURA LATINOAMERICANA · achiote (urucum) ------------------------- */
.n-conecta.eixo--literatura{
  --accent-primary:  var(--p-achiote-600);
  --accent-hover:    var(--p-achiote-700);
  --accent-active:   var(--p-achiote-900);
  --text-on-accent:  #FFFFFF;
  --accent-text:     var(--p-achiote-300);
  --accent-luz:      var(--p-achiote-400);
  --accent-suave:    var(--p-achiote-200);
  --accent-muted:    rgba(220,115,81,.12);
  --border-strong:   rgba(240,165,133,.20);
  --border-glass:    rgba(240,165,133,.26);
  --border-focus:    var(--p-achiote-300);
  --surface-selected:rgba(220,115,81,.12);
  --campo-atmosfera:
    radial-gradient(64rem 44rem at 82% -10%, rgba(220,115,81,.20),  transparent 62%),
    radial-gradient(48rem 34rem at 6% 104%,  rgba(240,165,133,.07), transparent 62%),
    radial-gradient(70rem 50rem at 50% 44%,  rgba(54,43,39,.88),    transparent 70%),
    linear-gradient(176deg,#231A16 0%,#1A1311 46%,#0C0E0E 100%);
  --glow-subtle: 0 0 0 1px rgba(220,115,81,.07), 0 8px 32px rgba(220,115,81,.05);
  --glow-active: 0 0 0 1px rgba(240,165,133,.18), 0 10px 38px rgba(220,115,81,.11);
}

/* --- RECURSOS COMPARTIDOS · añil (azul maya) ------------------------------- */
.n-conecta.eixo--recursos{
  --accent-primary:  var(--p-anil-600);
  --accent-hover:    var(--p-anil-700);
  --accent-active:   var(--p-anil-800);
  --text-on-accent:  #FFFFFF;
  --accent-text:     var(--p-anil-300);
  --accent-luz:      var(--p-anil-400);
  --accent-suave:    var(--p-anil-200);
  --accent-muted:    rgba(90,140,184,.12);
  --border-strong:   rgba(168,198,222,.20);
  --border-glass:    rgba(168,198,222,.26);
  --border-focus:    var(--p-anil-300);
  --surface-selected:rgba(90,140,184,.12);
  --campo-atmosfera:
    radial-gradient(64rem 44rem at 82% -10%, rgba(90,140,184,.20),  transparent 62%),
    radial-gradient(48rem 34rem at 6% 104%,  rgba(168,198,222,.07), transparent 62%),
    radial-gradient(70rem 50rem at 50% 44%,  rgba(38,46,56,.88),    transparent 70%),
    linear-gradient(176deg,#161D25 0%,#11161C 46%,#0C0E0E 100%);
  --glow-subtle: 0 0 0 1px rgba(90,140,184,.07), 0 8px 32px rgba(90,140,184,.05);
  --glow-active: 0 0 0 1px rgba(168,198,222,.18), 0 10px 38px rgba(90,140,184,.11);
}


/* =============================================================================
   4 · O PAR DIURNO — papel & tinta
   ============================================================================= */
[data-tema="claro"] .n-conecta,
.n-conecta[data-tema="claro"]{
  --background-deep:    #F0EDE6;
  --background-canvas:  var(--p-papel-100);
  --background-subtle:  var(--p-papel-200);
  --surface-1:          #FFFFFF;
  --surface-2:          var(--p-papel-200);
  --surface-3:          var(--p-papel-300);
  --surface-elevated:   #FFFFFF;

  --text-primary:       var(--p-tinta);
  --text-secondary:     var(--p-tinta-2);
  --text-muted:         var(--p-tinta-3);
  --text-on-accent:     #FFFFFF;

  --border-subtle:      rgba(16,20,19,.07);
  --border-default:     rgba(16,20,19,.10);

  --surface-veu:        linear-gradient(158deg,rgba(255,255,255,.62),rgba(255,255,255,0) 48%);
  --glass-tint-clear:   rgba(255,255,255,.52);
  --glass-tint-liquid:  rgba(255,255,255,.70);
  --glass-tint-frosted: rgba(255,255,255,.86);
}

[data-tema="claro"] .n-conecta.eixo--casa,
.n-conecta.eixo--casa[data-tema="claro"]{
  --accent-primary:#3A4341; --accent-hover:#2A3231; --accent-active:#1C2221;
  --text-on-accent:#FFFFFF; --accent-text:#3A4341; --accent-luz:#6B7573;
  --accent-muted:rgba(58,67,65,.07); --border-focus:#3A4341;
  --campo-atmosfera:
    radial-gradient(44rem 30rem at 80% -12%, rgba(54,172,129,.09), transparent 62%),
    radial-gradient(38rem 26rem at 50% 108%, rgba(220,115,81,.07), transparent 62%),
    radial-gradient(38rem 26rem at 8% 104%,  rgba(90,140,184,.07), transparent 62%),
    linear-gradient(176deg,#FFFEFB 0%,#F8F6F2 52%,#F0EDE6 100%);
}
[data-tema="claro"] .n-conecta.eixo--lengua,
.n-conecta.eixo--lengua[data-tema="claro"]{
  --accent-primary:var(--p-verde-700); --accent-hover:var(--p-verde-800); --accent-active:#093A31;
  --accent-text:var(--p-verde-700); --accent-luz:var(--p-verde-600);
  --accent-muted:rgba(54,172,129,.09); --border-focus:var(--p-verde-700);
  --campo-atmosfera:
    radial-gradient(46rem 34rem at 84% -12%, rgba(54,172,129,.11), transparent 62%),
    linear-gradient(176deg,#FFFEFB 0%,#F8F6F2 52%,#F0EDE6 100%);
}
[data-tema="claro"] .n-conecta.eixo--literatura,
.n-conecta.eixo--literatura[data-tema="claro"]{
  --accent-primary:var(--p-achiote-700); --accent-hover:#63220F; --accent-active:var(--p-achiote-900);
  --accent-text:var(--p-achiote-700); --accent-luz:var(--p-achiote-600);
  --accent-muted:rgba(220,115,81,.09); --border-focus:var(--p-achiote-700);
  --campo-atmosfera:
    radial-gradient(46rem 34rem at 84% -12%, rgba(220,115,81,.11), transparent 62%),
    linear-gradient(176deg,#FFFEFB 0%,#F8F6F2 52%,#F0EDE6 100%);
}
[data-tema="claro"] .n-conecta.eixo--recursos,
.n-conecta.eixo--recursos[data-tema="claro"]{
  --accent-primary:var(--p-anil-700); --accent-hover:var(--p-anil-800); --accent-active:var(--p-anil-950);
  --accent-text:var(--p-anil-700); --accent-luz:var(--p-anil-600);
  --accent-muted:rgba(90,140,184,.09); --border-focus:var(--p-anil-700);
  --campo-atmosfera:
    radial-gradient(46rem 34rem at 84% -12%, rgba(90,140,184,.11), transparent 62%),
    linear-gradient(176deg,#FFFEFB 0%,#F8F6F2 52%,#F0EDE6 100%);
}


/* =============================================================================
   5 · PEÇAS MÍNIMAS — só para provar o contrato. Cada projeto tem as suas.
   ============================================================================= */
.n-conecta .btn{
  border-radius: var(--raio-controle);
  padding: 12px 24px;
  font: inherit; font-size:.9rem; font-weight:500;
  border:1px solid transparent; cursor:pointer;
  transition: background-color var(--transicao), border-color var(--transicao),
              color var(--transicao), box-shadow var(--transicao);
}
.n-conecta .btn--primario{
  background: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px rgba(0,0,0,.22);
}
.n-conecta .btn--primario:hover{ background: var(--accent-hover); }
.n-conecta .btn--cristal{
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  color: var(--text-primary);
  border-color: var(--border-glass);
  backdrop-filter: blur(14px);
}
.n-conecta .cartao{
  border-radius: var(--raio-cartao);
  padding: 22px;
  border: 1px solid var(--border-default);
  background-image: var(--surface-veu);
  background-color: color-mix(in srgb, var(--surface-2) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 52px rgba(0,0,0,.24);
}
.n-conecta .etiqueta{
  font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--accent-text); font-weight:600;
}
.n-conecta .chip{
  border-radius: var(--raio-controle);
  padding: 7px 14px; font-size:.74rem;
  border:1px solid var(--border-default);
  color: var(--text-secondary);
  background: var(--accent-muted);
}
.n-conecta .chip--ativo{ border-color: var(--border-glass); color: var(--accent-text); }
.n-conecta :focus-visible{ outline:2px solid var(--border-focus); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .n-conecta *,.n-conecta *::before,.n-conecta *::after{
    animation-duration:1ms !important; transition-duration:1ms !important;
  }
}