/* ═══════════════ FUNDAÇÃO ═══════════════
   天圆地方, céu redondo e terra quadrada, como a moeda do logo. O círculo é o PORTAL de cada
   empresa (o portal da lua dos jardins chineses, a porta por onde se entra). O quadrado é o
   SELO, a marca de identidade, como os carimbos de cinábrio.
   Escuro "Laca" (laca negra) e claro "Porcelana". Não existe cor de ação própria: cada empresa
   tem a sua (cinábrio trato., jade Lastro, ouro Pixiu) e a ação neutra é papel sobre laca ou
   tinta sobre porcelana. As cores de empresa vivem nos portais, selos e marcadores; os fundos
   ficam neutros.
   Tipo: Source Serif 4 nos nomes e títulos; os glifos 凤 玄武 貔貅 深圳 紫禁城 vêm de um recorte
   da Noto Serif SC (mesma família de desenho); IBM Plex Sans na interface.
   Escala tipográfica: 12 / 14 / 16 / 18 / 21 / 28 / 36 / 60. Usado pelo painel e pela Cidade Proibida. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("/fonts/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/fonts/plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 500 700; font-display: swap; src: url("/fonts/source-serif-4-600.woff2") format("woff2"); }
@font-face { font-family: "Shenzhen Glifos"; font-weight: 400 900; font-display: block; src: url("/fonts/noto-serif-sc-700.woff2") format("woff2"); }

/* a aura do portal troca de cor suavemente: só uma propriedade registrada interpola cor */
@property --aura { syntax: "<color>"; inherits: true; initial-value: transparent; }
/* o anel dos portais se desenha por uma máscara cônica que vai de 0% a 100% */
@property --traco { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

/* claro: Porcelana */
:root {
  --fundo: #f3f5f4;
  --s1: #ffffff;
  --s2: #e8ecea;
  --borda: #dce1df;
  --borda-forte: #c3cac7;
  --t1: #141716;
  --t2: #454c49;
  --t3: #636b68;
  --neutro: #141716;
  --sobre-neutro: #ffffff;
  --sombra-flutuante: 0 18px 50px rgba(20, 23, 22, .16), 0 0 0 1px rgba(20, 23, 22, .05);
  --veu: rgba(20, 23, 22, .28);
  --aura-forca: 13%;
  --op-lado: .5;
  --fenix: #c23b2e;
  --fenix-texto: #a32e21;
  --fenix-suave: rgba(194, 59, 46, .08);
  --fenix-sobre: #ffffff;
  --tartaruga: #0b7a6c;
  --tartaruga-texto: #07655a;
  --tartaruga-suave: rgba(11, 122, 108, .08);
  --tartaruga-sobre: #ffffff;
  --pixiu: #966300;
  --pixiu-texto: #7c5200;
  --pixiu-suave: rgba(150, 99, 0, .09);
  --pixiu-sobre: #ffffff;
  color-scheme: light;
}

/* escuro: Laca. Laca #0E0C0B, superfície #181513, traço #2B2623, névoa #9C928B, papel #F1ECE6 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0e0c0b;
    --s1: #181513;
    --s2: #221e1c;
    --borda: #2b2623;
    --borda-forte: #3e3734;
    --t1: #f1ece6;
    --t2: #c2b9b2;
    --t3: #9c928b;
    --neutro: #f1ece6;
    --sobre-neutro: #0e0c0b;
    --sombra-flutuante: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);
    --veu: rgba(6, 5, 4, .64);
    --aura-forca: 22%;
    --op-lado: .42;
    --fenix: #ee6a5c;
    --fenix-texto: #f6a196;
    --fenix-suave: rgba(238, 106, 92, .13);
    --fenix-sobre: #1c0a07;
    --tartaruga: #3db8a5;
    --tartaruga-texto: #80d7c9;
    --tartaruga-suave: rgba(61, 184, 165, .13);
    --tartaruga-sobre: #03140f;
    --pixiu: #e3aa45;
    --pixiu-texto: #f1c97f;
    --pixiu-suave: rgba(227, 170, 69, .13);
    --pixiu-sobre: #1b1104;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fundo: #0e0c0b;
  --s1: #181513;
  --s2: #221e1c;
  --borda: #2b2623;
  --borda-forte: #3e3734;
  --t1: #f1ece6;
  --t2: #c2b9b2;
  --t3: #9c928b;
  --neutro: #f1ece6;
  --sobre-neutro: #0e0c0b;
  --sombra-flutuante: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);
  --veu: rgba(6, 5, 4, .64);
  --aura-forca: 22%;
  --op-lado: .42;
  --fenix: #ee6a5c;
  --fenix-texto: #f6a196;
  --fenix-suave: rgba(238, 106, 92, .13);
  --fenix-sobre: #1c0a07;
  --tartaruga: #3db8a5;
  --tartaruga-texto: #80d7c9;
  --tartaruga-suave: rgba(61, 184, 165, .13);
  --tartaruga-sobre: #03140f;
  --pixiu: #e3aa45;
  --pixiu-texto: #f1c97f;
  --pixiu-suave: rgba(227, 170, 69, .13);
  --pixiu-sobre: #1b1104;
  color-scheme: dark;
}

:root {
  --f12: 12px;
  --f14: 14px;
  --f16: 16px;
  --f18: 18px;
  --f21: 21px;
  --f28: 28px;
  --f36: 36px;
  --f60: 60px;
  --r-pilula: 999px;
  --r-painel: 14px;
  --r-selo: 4px;
  --duracao: 160ms;
  --giro: 480ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --sans: "IBM Plex Sans", "Shenzhen Glifos", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", "Shenzhen Glifos", Georgia, "Times New Roman", serif;
  --glifo: "Shenzhen Glifos", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
}

/* cor da empresa: qualquer elemento com data-zona passa --z / --z-texto / --z-suave / --z-sobre
   aos filhos; sem zona, cai no neutro */
:root, [data-zona] { --z: var(--t3); --z-texto: var(--t1); --z-suave: var(--s2); --z-sobre: var(--fundo); }
[data-zona="fenix"] { --z: var(--fenix); --z-texto: var(--fenix-texto); --z-suave: var(--fenix-suave); --z-sobre: var(--fenix-sobre); }
[data-zona="tartaruga"] { --z: var(--tartaruga); --z-texto: var(--tartaruga-texto); --z-suave: var(--tartaruga-suave); --z-sobre: var(--tartaruga-sobre); }
[data-zona="pixiu"] { --z: var(--pixiu); --z-texto: var(--pixiu-texto); --z-suave: var(--pixiu-suave); --z-sobre: var(--pixiu-sobre); }

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--fundo);
  color: var(--t1);
  font: var(--f14)/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

[lang="zh"] { font-family: var(--glifo); font-weight: 700; }

a { color: inherit; }

button { font: inherit; color: inherit; }

svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 5px;
  border: 1px solid var(--borda-forte);
  border-radius: 5px;
  color: var(--t2);
  font: 500 var(--f12)/18px var(--sans);
}

:focus-visible { outline: 2px solid var(--z-texto); outline-offset: 3px; }

::selection { background: var(--z-suave); }

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