/* ============================================================
   TASCO — contrato de cor e de tipos, partilhado pelas três
   superfícies (site público, webapp da agência, portal das hosts).

   Carrega-se antes de qualquer outra folha. As folhas de cada
   superfície só declaram, no topo, os apelidos dos nomes antigos
   que ainda usam — o valor vive aqui e num sítio só.

   Os ramos foram construídos em OKLCH (passos percetualmente
   iguais entre tons) e gravados em hex porque o projeto não tem
   build step e o resto do CSS é hex/rgba. O comentário ao lado de
   cada cor guarda a coordenada de origem e o contraste medido
   sobre o fundo do próprio tema, para não se voltar a adivinhar.
   ============================================================ */

/* ── Tipos auto-hospedados ─────────────────────────────────────
   A CSP só autoriza fontes de 'self' e de fonts.gstatic.com — a
   Fontshare, de onde vêm os ficheiros, ficaria bloqueada em
   directo. Por isso estão em /static/fonts. */
@font-face{font-family:'General Sans';src:url('/static/fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/static/fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/static/fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* 700 existe por causa das webapps: os painéis têm 174 títulos e
   rótulos a 700 e, sem ficheiro, o browser sintetizava o negrito. */
@font-face{font-family:'General Sans';src:url('/static/fonts/general-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Rollo é a fonte do próprio logótipo. Só em títulos, que é onde o
   desenho dela funciona; o corpo continua em General Sans. */
@font-face{
  font-family:'Rollo';
  src:url('/static/fonts/rollo-regular.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}

/* Coranto 2 já é bold italic — registada como normal/400 para o
   browser não sintetizar por cima. Usada por .ced-all (nick.js)
   nos nicknames da Poppo com cedilha combinada (ex.: Conceição). */
@font-face{
  font-family:"Coranto 2";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/static/fonts/coranto-2-bold-italic.woff2') format('woff2'),
      url('/static/fonts/Coranto W01 2 Bold Italic.ttf') format('truetype');
}

/* ── Tema escuro — "Velvet Rose VIP" ────────────────────────
   Os valores vêm do sistema desenhado no Stitch (velvet_rose_vip):
   ameixa-obsidiana como tela, vidro violeta por cima, acento rosa
   e champanhe metálico da marca. Onde o sistema só nomeia as duas
   pontas de uma escala (texto pérola e lavanda apagada), o degrau
   do meio foi interpolado — vem assinalado. O contraste ao lado de
   cada cor é medido sobre --bg. */
:root{
  /* Tela e camadas de vidro (background-deep → border-glass). */
  --bg:        #110B17;   /* background-deep */
  --bg-2:      #180F22;   /* background-surface */
  --bg-3:      #241634;   /* surface-glass */
  --bg-4:      #3E2458;   /* border-glass, a camada mais alta */

  --ink:       #FAF5F7;   /* text-pearl — 18.0:1 sobre --bg */
  --ink-2:     #C9B6D4;   /* 10.3:1 — degrau interpolado entre os dois */
  --ink-3:     #A894B3;   /* text-muted — 7.0:1 */

  /* Filetes. O do cartão é rosa (é a borda da .velvet-card do desenho),
     o neutro é pérola e o de marca continua dourado. */
  --hair:      rgba(226,125,140,.22);
  --hair-2:    rgba(250,245,247,.09);
  --hair-3:    rgba(244,208,100,.32);

  /* Rosa: o acento de acção, foco e estado activo (o primary do sistema).
     Ocupa o lugar do granada — mesma função, o tom do desenho novo. */
  --mag:       #E27D8C;   /* 7.0:1 */
  --mag-hi:    #F59AA9;
  --mag-dp:    #9B394C;   /* fundo de botão: branco por cima, 6.8:1 */

  /* Violeta: o segundo acento — superfícies, halos, dados. A ponta escura
     é a do sistema (border-highlight); a clara é a subida necessária para
     o violeta se poder ler como texto. */
  --vio:       #A88BD0;   /* 6.7:1 */
  --vio-hi:    #C6B0E4;
  --vio-dp:    #5D3782;   /* border-highlight */

  /* Dourado: a cor do logótipo, nos três degraus champanhe do sistema.
     São os mesmos que o desenho usa nos emblemas VIP e nos valores. */
  --gold:      #E5B93D;   /* 10.5:1 */
  --gold-hi:   #F4D064;   /* gold-champagne */
  --gold-dp:   #BC7C1C;   /* gold-burnished */

  /* Metais do pódio. Estão aqui e não nas listas porque o 1.º, o 2.º e o
     3.º aparecem em sete sítios diferentes — medalha, número da linha,
     etiqueta do mês — e cada um tinha o seu ouro. */
  --pod-1:      #F4D064;  /* ouro, o champanhe claro do sistema */
  --pod-2:      #CBC9D4;  /* prata */
  --pod-3:      #C87F45;  /* bronze */
  --pod-1-surf: rgba(244,208,100,.12);
  --pod-2-surf: rgba(203,201,212,.12);
  --pod-3-surf: rgba(200,127,69,.12);
  --pod-1-line: rgba(244,208,100,.40);
  --pod-2-line: rgba(203,201,212,.35);
  --pod-3-line: rgba(200,127,69,.35);

  --ok:        #2EE59D;   /* success-emerald — 11.8:1 */
  --warn:      #FAAB3F;   /* 10.1:1 */
  /* O sistema reserva o berry (#E8317A) para "ao vivo", não para erro; o
     erro fica no laranja-vermelho, que não se confunde com o acento rosa. */
  --err:       #FF6853;   /*  6.8:1 */

  /* Cores de terceiros. Não são da paleta e não se ajustam ao tema: são
     a identidade do WhatsApp e do Instagram, e é assim que se reconhecem. */
  --wa:        #25D366;
  --ig:        #E1306C;

  /* Superfícies e vidros, todos derivados do violeta para o
     empastelamento das camadas ser de uma família só. */
  --surf:      rgba(168,139,208,.05);
  --surf-2:    rgba(168,139,208,.09);
  --surf-3:    rgba(168,139,208,.15);
  /* Chapas de cor por acento: fundo de etiqueta, de aba activa, de cartão
     em destaque. Duas intensidades por acento chegam para tudo. */
  --mag-surf:   rgba(226,125,140,.08);
  --mag-surf-2: rgba(226,125,140,.16);
  --vio-surf:   rgba(168,139,208,.09);
  --vio-surf-2: rgba(168,139,208,.18);
  --gold-surf:  rgba(244,208,100,.08);
  --gold-surf-2:rgba(244,208,100,.16);
  --chrome:    rgba(12,7,18,.94);
  --chrome-2:  rgba(12,7,18,.72);
  --card:      rgba(36,22,52,.85);
  --card-2:    rgba(36,22,52,.60);
  --panel:     #1C0F29;
  --field:     rgba(12,7,18,.70);
  --vidro-a:   rgba(250,245,247,.07);
  --vidro-b:   rgba(250,245,247,.02);

  --sombra:    rgba(0,0,0,.75);
  /* As três sombras do sistema: card-glass, e os dois halos (rosa e ouro)
     que substituem a sombra cinzenta genérica. */
  --sh-sm:     0 8px 32px rgba(0,0,0,.45);
  --sh-md:     0 16px 48px rgba(0,0,0,.60);
  --sh-mag:    0 8px 40px rgba(226,125,140,.28);
  --sh-gold:   0 8px 40px rgba(244,208,100,.25);

  /* Luz de fundo e halos: as duas manchas radiais do desenho — rosa em
     cima, ouro queimado a atravessar. */
  --luz-1:     rgba(226,125,140,.18);
  --luz-2:     rgba(188,124,28,.10);
  --luz-1-0:   rgba(226,125,140,0);
  --luz-2-0:   rgba(188,124,28,0);
  --halo-1:    rgba(168,139,208,.20);
  --halo-2:    rgba(226,125,140,.15);
  --halo-3:    rgba(226,125,140,.05);
  --halo-0:    rgba(226,125,140,0);

  /* Dois gradientes, dois papéis. Acção é sempre rosa; dourado é marca
     e emblema. */
  /* A paragem escura segura-se até depois do meio de propósito: é onde
     fica o rótulo, e o branco só se lê a sério sobre --mag-dp. O --mag
     fica para o brilho que atravessa o botão no hover. */
  --grad-cta:   linear-gradient(135deg,var(--mag-dp) 0%,var(--mag-dp) 58%,var(--mag) 100%);
  --grad-marca: linear-gradient(135deg,var(--gold-dp) 0%,var(--gold-dp) 52%,var(--gold) 100%);
  /* O fio que percorre o topo dos cartões e dos cabeçalhos: uma fita de
     ouro com uma nota de rosa, e não o arco-íris de três famílias que
     estava aqui antes. Segue o gradiente do logótipo. */
  --grad-fio:   linear-gradient(90deg,transparent,var(--gold-dp),var(--gold),var(--gold-hi),var(--gold),var(--mag),var(--gold-dp),transparent);
  --on-cta:     #FFFFFF;
  /* Marca: os dois extremos do degradê do emblema e do letreiro. Vivem
     aqui e não dentro do desenho porque o mesmo traçado serve os dois
     temas — o champanhe medido para o escuro cai para 1.4:1 no claro. */
  --marca-b:   #BC7C1C;   /* bordo   —  5.6:1 sobre --bg */
  --marca-c:   #F4D064;   /* centro  — 13.0:1 sobre --bg */
  --on-gold:    #180F22;  /* dourado é claro nos dois temas: texto escuro */

  /* Famílias. O nome fica, o valor é que passou a ser o do site. */
  --ff-d: 'Rollo','Gambetta','Iowan Old Style',Georgia,serif;
  --ff-b: 'General Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  /* Pilha própria dos nicknames da Poppo: caracteres matemáticos e
     CJK que as fontes da marca não têm. Não é decoração. */
  --ff-nickname: system-ui,-apple-system,Roboto,"Noto Sans Math","Noto Sans Symbols 2","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;

  color-scheme: dark;
}

/* ── Tema claro — "Haute Creator Luminary" ────────────────────
   O par claro do mesmo ficheiro: alabastro morno, champanhe e
   quartzo rosa. Os tons de superfície entram como estão; os que
   servem de texto foram escurecidos dentro do mesmo matiz até
   passarem AA — à luz, o champanhe #C59B27 dá 2,5:1 e não se lê.
   Onde isso aconteceu, a cor original do sistema fica como --*-hi,
   que é onde ela é usada: preenchimentos, emblemas e realces. */
:root[data-theme="light"]{
  --bg:        #FAF8F5;   /* alabastro morno */
  --bg-2:      #F5F1EB;   /* superfície recolhida */
  --bg-3:      #EFECE6;   /* divisórias e chapas */
  --bg-4:      #E5DFD7;

  --ink:       #1C1917;   /* 16.5:1 sobre --bg */
  --ink-2:     #44403C;   /*  9.7:1 */
  --ink-3:     #78716C;   /*  4.5:1 — rótulos e meta */

  --hair:      rgba(197,155,39,.22);   /* filete com tinta dourada */
  --hair-2:    rgba(28,25,23,.10);
  --hair-3:    rgba(197,155,39,.38);

  --mag:       #B8455F;   /*  4.9:1 — o quartzo rosa escurecido até ler */
  --mag-hi:    #E5839C;   /* o rosa do sistema, para preenchimentos */
  --mag-dp:    #96435B;   /* fundo de botão: branco por cima, 6.5:1 */

  /* O sistema claro não tem violeta — tem ouro, rosa e esmeralda. Este
     ramo é a ponte: a mesma função de segundo acento, num malva que sai
     do rosa e continua a distinguir-se dele dentro de um gráfico. */
  --vio:       #7E5271;   /*  5.9:1 */
  --vio-hi:    #A9789A;
  --vio-dp:    #573649;

  --gold:      #94670F;   /*  4.7:1 — o champanhe escurecido até passar AA */
  --gold-hi:   #C59B27;   /* champanhe do sistema: botões e emblemas */
  --gold-dp:   #764600;

  /* Os mesmos três metais, escurecidos. Os do escuro são cores de metal
     polido — claras por definição — e sobre branco davam 1,5:1: a medalha
     de prata desaparecia por completo. Aqui vale o matiz e não o brilho:
     ouro puxado ao azeitona, bronze ao vermelho, prata neutra fria, para
     os três continuarem a distinguir-se uns dos outros a 30px. */
  --pod-1:      #8F6B00;  /*  4.9:1 sobre --bg */
  --pod-2:      #6B6779;  /*  5.5:1 */
  --pod-3:      #A8481E;  /*  5.9:1 */
  --pod-1-surf: rgba(143,107,0,.10);
  --pod-2-surf: rgba(107,103,121,.10);
  --pod-3-surf: rgba(168,72,30,.10);
  --pod-1-line: rgba(143,107,0,.38);
  --pod-2-line: rgba(107,103,121,.34);
  --pod-3-line: rgba(168,72,30,.34);

  --ok:        #047857;   /* a esmeralda do sistema, na versão de texto */
  --warn:      #A76200;
  --err:       #BA1A1A;

  --surf:      rgba(197,155,39,.05);
  --surf-2:    rgba(197,155,39,.09);
  --surf-3:    rgba(197,155,39,.14);
  --mag-surf:   rgba(229,131,156,.10);
  --mag-surf-2: rgba(229,131,156,.20);
  --vio-surf:   rgba(126,82,113,.07);
  --vio-surf-2: rgba(126,82,113,.14);
  --gold-surf:  rgba(197,155,39,.10);
  --gold-surf-2:rgba(197,155,39,.18);
  --chrome:    rgba(255,255,255,.94);
  --chrome-2:  rgba(255,255,255,.80);
  --card:      #FFFFFF;   /* porcelana */
  --card-2:    rgba(255,255,255,.72);
  --panel:     #FFFFFF;
  --field:     #FDFBF7;   /* o campo de formulário do sistema */
  --vidro-a:   rgba(255,255,255,.72);
  --vidro-b:   rgba(255,255,255,.38);

  --sombra:    rgba(28,25,23,.18);
  /* Sombras quentes e difusas em vez de cinzentos genéricos: é a regra
     de elevação do sistema claro. */
  --sh-sm:     0 4px 20px -2px rgba(158,120,24,.10);
  --sh-md:     0 12px 32px -4px rgba(158,120,24,.14);
  --sh-mag:    0 8px 40px rgba(229,131,156,.22);
  --sh-gold:   0 8px 40px rgba(197,155,39,.22);

  --luz-1:     rgba(229,131,156,.12);
  --luz-2:     rgba(197,155,39,.10);
  --luz-1-0:   rgba(229,131,156,0);
  --luz-2-0:   rgba(197,155,39,0);
  --halo-1:    rgba(197,155,39,.12);
  --halo-2:    rgba(229,131,156,.07);
  --halo-3:    rgba(229,131,156,.02);
  --halo-0:    rgba(229,131,156,0);

  /* No claro o branco lê-se em todo o percurso de --mag-dp a --mag
     (5.2:1 no fim), por isso o gradiente pode abrir mais cedo. */
  --grad-cta:   linear-gradient(135deg,var(--mag-dp) 0%,var(--mag) 100%);
  --grad-marca: linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 100%);
  --on-cta:     #FFFFFF;
  /* O mesmo metal, queimado até ler sobre o alabastro. A razão de
     luminância entre bordo e centro mantém-se (3.0 contra os 2.6 do
     escuro), por isso o degradê continua a ler-se como metal e não como
     mancha chapada. */
  --marca-b:   #5E3A00;   /* bordo   — 9.5:1 sobre --bg */
  --marca-c:   #94670F;   /* centro  — 4.7:1 sobre --bg */
  --on-gold:    #1C1917;

  color-scheme: light;
}
/* ── Ícones ───────────────────────────────────────────────────
   O sprite Phosphor é o mesmo nas três superfícies. `.ic` é o
   ícone que substitui um emoji dentro de texto corrido: mede-se
   em em para acompanhar a linha, e herda a cor de quem o contém.
   (`.i`, dimensionado em px, continua a ser o do site.) */
.sprite{position:absolute}
/* Corre nas três superfícies porque o nick.js corre nas três. */
.ced-all{font-family:"Coranto 2",Georgia,serif;font-weight:400;font-style:normal;font-size:1em;line-height:inherit}

/* ── Medalhas do pódio ────────────────────────────────────────
   O número vai dentro da medalha e a cor diz o degrau. A cor está aqui e
   não no sítio onde a medalha aparece: cada lista tinha a sua regra, e
   metade delas não pintava nada — o 1.º e o 3.º saíam iguais. */
.medalha{width:1.9em;height:1.9em;fill:currentColor;flex:none;vertical-align:-.62em}
.medalha-1{color:var(--pod-1)}
.medalha-2{color:var(--pod-2)}
.medalha-3{color:var(--pod-3)}
.ic{
  width:1em;height:1em;
  fill:currentColor;
  flex:none;
  vertical-align:-.125em;
}