/* ==========================================================================
   blind digital — tokens v2 · "luz instrumental"
   Futurismo em luz do dia: telemetria, HUD e vidro sobre papel claro.
   Cores extraídas dos SVGs oficiais da marca.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- Propriedades registradas: permitem animar ângulos e números -------- */
@property --spin  { syntax: '<angle>';      initial-value: 0deg; inherits: false; }
@property --sweep { syntax: '<percentage>'; initial-value: 0%;   inherits: false; }

:root {
  /* --- Superfícies ------------------------------------------------------ */
  --paper:      #F5F3EF;
  --paper-2:    #EFECE6;
  --paper-3:    #E6E2DA;
  --card:       #FFFFFF;
  --glass:      rgba(255,255,255,.58);
  --ink-bg:     #0A0A0C;

  /* --- Tinta ------------------------------------------------------------ */
  --ink:        #0A0A0C;
  --ink-2:      #4B4B54;
  --ink-3:      #86868F;
  --line:       #DFDBD3;
  --line-2:     #CBC5B9;
  --on-ink:     #F5F3EF;
  --on-ink-2:   #9C9AA4;

  /* --- Tríades das quatro linhas (extraídas dos SVGs oficiais) ---------- */
  --essential-1:#B53A63;     --essential-2:#E85E89;     --essential-3:#FDB0CA;
  --corporate-1:#103BAE;     --corporate-2:#0354FD;     --corporate-3:#44A1F7;
  --institutional-1:#5859F4; --institutional-2:#1A59F3; --institutional-3:#E85E89;
  --premium-1:#332BC7;       --premium-2:#5C53FE;       --premium-3:#B7B3FF;

  /* --- Tríade ativa ----------------------------------------------------- */
  --b1: var(--institutional-1);
  --b2: var(--institutional-2);
  --b3: var(--institutional-3);
  --wash: #E9EAFE;

  --ok: #0F7A46;
  --warn: #9A6400;
  --alert: #B3261E;

  /* --- Pares semanticos: unica fonte de verdade para inversoes ---------- */
  /* Superficie invertida (botao primario, passo concluido, item ativo).   */
  --invert-bg: #0A0A0C;
  --invert-fg: #F5F3EF;
  /* Tinta sobre preenchimento de marca ou de status.                      */
  --on-brand:  #FFFFFF;
  --on-status: #FFFFFF;
  /* Selecao de texto.                                                     */
  --sel-bg: var(--b3);
  --sel-fg: #0A0A0C;

  /* --- Status em superficie suave --------------------------------------- */
  --ok-bg:     #E3F3EA;  --ok-fg:     #0F7A46;  --ok-line:    #BFE0CD;
  --warn-bg:   #FBF5E8;  --warn-fg:   #6B4E00;  --warn-line:  #EBD9AF;
  --alert-bg:  #FBE9E7;  --alert-fg:  #A3231C;  --alert-line: #F2C6C1;

  /* --- Aparelho ilustrado (mockup de celular) ---------------------------- */
  --dev-shell:  #FFFFFF;
  --dev-back:   linear-gradient(160deg, #FFFFFF 0%, #F2F0EC 62%, #E8E5DF 100%);
  --dev-back-2: linear-gradient(152deg, #FFFFFF 0%, #F4F2EE 48%, #E7E4DE 100%);
  --dev-lens:   radial-gradient(circle at 34% 30%, #FFFFFF, #CFCBC3 62%, #A9A59D);
  --dev-hair:   rgba(10,10,12,.09);
  --dev-drop:   rgba(10,10,12,.16);
  --dev-bar:    rgba(10,10,12,.13);
  --dev-notch:  rgba(10,10,12,.16);
  --dev-row:    rgba(255,255,255,.80);
  --dev-glare:  rgba(255,255,255,.62);

  /* --- Intensidades do ambiente ----------------------------------------- */
  --grain-opacity: .032;
  --mesh-opacity:  .55;
  --shine: rgba(255,255,255,.34);

  /* --- Tipografia ------------------------------------------------------- */
  --f-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-text:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --t-xs:   .6875rem;
  --t-sm:   .8125rem;
  --t-base: .9375rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.25rem, .95rem + 1.05vw, 1.55rem);
  --t-xl:   clamp(1.65rem, 1.1rem + 2vw, 2.4rem);
  --t-2xl:  clamp(2.1rem, 1.15rem + 3.6vw, 3.6rem);
  --t-3xl:  clamp(2.7rem, 1rem + 6.2vw, 5.8rem);

  /* --- Métrica ---------------------------------------------------------- */
  --gutter: clamp(20px, 4vw, 44px);
  --max:    1240px;
  --measure: 62ch;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(10,10,12,.04), 0 3px 12px rgba(10,10,12,.04);
  --sh-2: 0 2px 6px rgba(10,10,12,.05), 0 16px 44px rgba(10,10,12,.08);
  --sh-3: 0 6px 14px rgba(10,10,12,.06), 0 36px 80px rgba(10,10,12,.12);

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

[data-line="essential"]    { --b1:var(--essential-1);    --b2:var(--essential-2);    --b3:var(--essential-3);    --wash:#FBEDF2; }
[data-line="corporate"]    { --b1:var(--corporate-1);    --b2:var(--corporate-2);    --b3:var(--corporate-3);    --wash:#E6F0FE; }
[data-line="institutional"]{ --b1:var(--institutional-1);--b2:var(--institutional-2);--b3:var(--institutional-3);--wash:#E9EAFE; }
[data-line="premium"]      { --b1:var(--premium-1);      --b2:var(--premium-2);      --b3:var(--premium-3);      --wash:#ECEBFF; }

/* ==========================================================================
   Tema escuro — "luz instrumental" depois do expediente
   As mesmas variaveis, outra luminancia. Nenhum componente sabe que mudou.

   Duas portas de entrada:
     1. :root[data-theme="dark"]  — escolha explicita, gravada no navegador.
     2. @media prefers-color-scheme — preferencia do sistema, quando o
        visitante nao escolheu nada (e tambem quando o JS nao roda).
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* --- Superficies: papel vira tinta ------------------------------------ */
  --paper:      #0B0B0E;
  --paper-2:    #131318;
  --paper-3:    #1B1B22;
  --card:       #141419;
  --glass:      rgba(255,255,255,.055);
  --ink-bg:     #17171E;

  /* --- Tinta ------------------------------------------------------------ */
  --ink:        #F2F1EC;
  --ink-2:      #A9A8B2;
  --ink-3:      #78777F;
  --line:       #262630;
  --line-2:     #35353F;
  --on-ink:     #F5F3EF;
  --on-ink-2:   #9C9AA4;

  /* --- Triades reequilibradas: mesmo matiz, luminancia para fundo escuro - */
  --essential-1:#F2799E;     --essential-2:#FDB0CA;     --essential-3:#FFD1E0;
  --corporate-1:#58A6F7;     --corporate-2:#8CC4FA;     --corporate-3:#B9DCFC;
  --institutional-1:#8A8BFA; --institutional-2:#A5A6FC; --institutional-3:#F2799E;
  --premium-1:#9A94FF;       --premium-2:#B7B3FF;       --premium-3:#D6D3FF;

  --b1: var(--institutional-1);
  --b2: var(--institutional-2);
  --b3: var(--institutional-3);
  --wash: #191A2E;

  --ok: #4ED08A;
  --warn: #F0B63C;
  --alert: #FF7A6E;

  /* --- Pares semanticos invertidos --------------------------------------- */
  --invert-bg: #F2F1EC;
  --invert-fg: #0A0A0C;
  --on-brand:  #0A0A0C;
  --on-status: #0A0A0C;
  --sel-bg: color-mix(in srgb, var(--b1) 38%, transparent);
  --sel-fg: #FFFFFF;

  --ok-bg:     #0E2418;  --ok-fg:     #5FE0A0;  --ok-line:    #1F4C35;
  --warn-bg:   #2A1F0A;  --warn-fg:   #F2C45C;  --warn-line:  #4D3A13;
  --alert-bg:  #2C1412;  --alert-fg:  #FF9285;  --alert-line: #57231F;

  --dev-shell:  #16161C;
  --dev-back:   linear-gradient(160deg, #1C1C24 0%, #15151B 62%, #101015 100%);
  --dev-back-2: linear-gradient(152deg, #1C1C24 0%, #15151B 48%, #101015 100%);
  --dev-lens:   radial-gradient(circle at 34% 30%, #3A3A46, #1A1A22 62%, #0C0C11);
  --dev-hair:   rgba(255,255,255,.10);
  --dev-drop:   rgba(0,0,0,.58);
  --dev-bar:    rgba(255,255,255,.14);
  --dev-notch:  rgba(255,255,255,.18);
  --dev-row:    rgba(255,255,255,.065);
  --dev-glare:  rgba(255,255,255,.13);

  /* --- Ambiente: no escuro a sombra precisa ser preta de verdade --------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.50), 0 3px 12px rgba(0,0,0,.38);
  --sh-2: 0 2px 6px rgba(0,0,0,.55), 0 16px 44px rgba(0,0,0,.48);
  --sh-3: 0 6px 14px rgba(0,0,0,.60), 0 36px 80px rgba(0,0,0,.58);

  --grain-opacity: .048;
  --mesh-opacity:  .40;
  --shine: rgba(255,255,255,.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* --- Superficies: papel vira tinta ------------------------------------ */
    --paper:      #0B0B0E;
    --paper-2:    #131318;
    --paper-3:    #1B1B22;
    --card:       #141419;
    --glass:      rgba(255,255,255,.055);
    --ink-bg:     #17171E;

    /* --- Tinta ------------------------------------------------------------ */
    --ink:        #F2F1EC;
    --ink-2:      #A9A8B2;
    --ink-3:      #78777F;
    --line:       #262630;
    --line-2:     #35353F;
    --on-ink:     #F5F3EF;
    --on-ink-2:   #9C9AA4;

    /* --- Triades reequilibradas: mesmo matiz, luminancia para fundo escuro - */
    --essential-1:#F2799E;     --essential-2:#FDB0CA;     --essential-3:#FFD1E0;
    --corporate-1:#58A6F7;     --corporate-2:#8CC4FA;     --corporate-3:#B9DCFC;
    --institutional-1:#8A8BFA; --institutional-2:#A5A6FC; --institutional-3:#F2799E;
    --premium-1:#9A94FF;       --premium-2:#B7B3FF;       --premium-3:#D6D3FF;

    --b1: var(--institutional-1);
    --b2: var(--institutional-2);
    --b3: var(--institutional-3);
    --wash: #191A2E;

    --ok: #4ED08A;
    --warn: #F0B63C;
    --alert: #FF7A6E;

    /* --- Pares semanticos invertidos --------------------------------------- */
    --invert-bg: #F2F1EC;
    --invert-fg: #0A0A0C;
    --on-brand:  #0A0A0C;
    --on-status: #0A0A0C;
    --sel-bg: color-mix(in srgb, var(--b1) 38%, transparent);
    --sel-fg: #FFFFFF;

    --ok-bg:     #0E2418;  --ok-fg:     #5FE0A0;  --ok-line:    #1F4C35;
    --warn-bg:   #2A1F0A;  --warn-fg:   #F2C45C;  --warn-line:  #4D3A13;
    --alert-bg:  #2C1412;  --alert-fg:  #FF9285;  --alert-line: #57231F;

    --dev-shell:  #16161C;
    --dev-back:   linear-gradient(160deg, #1C1C24 0%, #15151B 62%, #101015 100%);
    --dev-back-2: linear-gradient(152deg, #1C1C24 0%, #15151B 48%, #101015 100%);
    --dev-lens:   radial-gradient(circle at 34% 30%, #3A3A46, #1A1A22 62%, #0C0C11);
    --dev-hair:   rgba(255,255,255,.10);
    --dev-drop:   rgba(0,0,0,.58);
    --dev-bar:    rgba(255,255,255,.14);
    --dev-notch:  rgba(255,255,255,.18);
    --dev-row:    rgba(255,255,255,.065);
    --dev-glare:  rgba(255,255,255,.13);

    /* --- Ambiente: no escuro a sombra precisa ser preta de verdade --------- */
    --sh-1: 0 1px 2px rgba(0,0,0,.50), 0 3px 12px rgba(0,0,0,.38);
    --sh-2: 0 2px 6px rgba(0,0,0,.55), 0 16px 44px rgba(0,0,0,.48);
    --sh-3: 0 6px 14px rgba(0,0,0,.60), 0 36px 80px rgba(0,0,0,.58);

    --grain-opacity: .048;
    --mesh-opacity:  .40;
    --shine: rgba(255,255,255,.16);
  }
}

[data-theme="dark"] [data-line="essential"],
[data-theme="dark"][data-line="essential"]         { --wash:#2A161E; }
[data-theme="dark"] [data-line="corporate"],
[data-theme="dark"][data-line="corporate"]         { --wash:#0F1E30; }
[data-theme="dark"] [data-line="institutional"],
[data-theme="dark"][data-line="institutional"]     { --wash:#191A2E; }
[data-theme="dark"] [data-line="premium"],
[data-theme="dark"][data-line="premium"]           { --wash:#1D1B38; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-line="essential"]     { --wash:#2A161E; }
  :root:not([data-theme="light"]) [data-line="corporate"]     { --wash:#0F1E30; }
  :root:not([data-theme="light"]) [data-line="institutional"] { --wash:#191A2E; }
  :root:not([data-theme="light"]) [data-line="premium"]       { --wash:#1D1B38; }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* --- Troca de tema: um fade curto, so nas superficies ------------------ */
html.theme-anim,
html.theme-anim body,
html.theme-anim .topbar,
html.theme-anim .side,
html.theme-anim .card,
html.theme-anim .panel { transition: background-color .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease); }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

::selection { background: var(--sel-bg); color: var(--sel-fg); }
:focus-visible { outline: 2px solid var(--b2); outline-offset: 3px; border-radius: 4px; }

/* --- Malha ambiente: grade fina revelada por um foco que segue o mouse --
   Nome propositalmente distinto de .field, que no forms.css é o invólucro
   de campo de formulário. A colisão anterior deixava todo input fixo na
   viewport e sem receber clique.                                          */
.mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: var(--mesh-opacity, .55);
  -webkit-mask-image: radial-gradient(440px circle at var(--mx,50%) var(--my,28%), #000 0%, transparent 72%);
          mask-image: radial-gradient(440px circle at var(--mx,50%) var(--my,28%), #000 0%, transparent 72%);
}

/* --- Grão: dá matéria ao papel sem sujar o texto ----------------------- */
.grain {
  position: fixed;
  inset: -60%;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity, .032);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 6s steps(5) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-2.5%,2%); }
  40% { transform: translate(2%,-2.5%); }
  60% { transform: translate(-2%,-2%); }
  80% { transform: translate(2.5%,1%); }
}

main, .foot { position: relative; z-index: 2; }

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1,h2,h3,h4,h5 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); letter-spacing: -.05em; }
h2 { font-size: var(--t-2xl); letter-spacing: -.045em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
h5 { font-size: var(--t-md); letter-spacing: -.02em; }

.thin { font-weight: 400; letter-spacing: -.03em; color: var(--ink-2); }
.lede { font-size: var(--t-md); color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }

/* --- Etiqueta HUD ------------------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--b1);
}
.tag::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: tagLine 3.4s var(--ease) infinite;
}
@keyframes tagLine { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.4); } }

.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: -.01em; }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 148px); }

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-full);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-base);
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), background .45s var(--ease),
              border-color .45s var(--ease), transform .35s var(--ease-out);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 22%, var(--shine) 48%, transparent 74%);
  transform: translateX(-125%);
  transition: transform .85s var(--ease-out);
}
.btn:hover::after { transform: translateX(125%); }
.btn:active { transform: scale(.975); }

.btn--primary { background: var(--invert-bg); color: var(--invert-fg); }
.btn--primary:hover { background: var(--b1); }
.btn--brand { background: var(--b1); color: var(--on-brand); }
.btn--brand:hover { background: var(--invert-bg); color: var(--invert-fg); }
.btn--ghost { border: 1px solid var(--line-2); color: var(--ink); background: var(--glass); backdrop-filter: blur(8px); }
.btn--ghost:hover { border-color: var(--b2); color: var(--b1); }

.btn--sm { padding: .55rem 1.05rem; font-size: var(--t-sm); }
.btn--lg { padding: 1.05rem 2rem; font-size: var(--t-md); }
.btn--block { width: 100%; }

/* ==========================================================================
   Revelação — dirigida por scroll onde houver suporte
   ========================================================================== */

.rv { opacity: 0; transform: translateY(26px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

@supports (animation-timeline: view()) {
  .rv {
    opacity: 1;
    transform: none;
    animation: rvIn linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 26%;
  }
  @keyframes rvIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
  .grain, .mesh { display: none; }
}

/* ==========================================================================
   Alternador de tema
   Um interruptor de 44px que mostra o destino, nao o estado: com a luz
   acesa desenha a lua; no escuro, o sol. O rotulo acessivel acompanha.
   ========================================================================== */

.theme-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--glass);
  backdrop-filter: blur(10px);
  color: var(--ink-2);
  transition: color .35s var(--ease), border-color .35s var(--ease),
              background .35s var(--ease), box-shadow .35s var(--ease);
}
.theme-toggle:hover {
  color: var(--b1);
  border-color: var(--b2);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--b2) 12%, transparent);
}
.theme-toggle:active { transform: scale(.94); }

.theme-toggle svg {
  position: absolute;
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .38s var(--ease), transform .55s var(--ease-out);
}
/* no claro mostramos a lua (para onde se vai); no escuro, o sol */
.theme-toggle .ico-sun  { opacity: 0; transform: rotate(-70deg) scale(.55); }
.theme-toggle .ico-moon { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .ico-sun  { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .ico-moon { opacity: 0; transform: rotate(70deg) scale(.55); }

/* variante da barra lateral do painel: retangular, acompanha os links */
.theme-toggle--side {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  justify-content: flex-start;
  grid-auto-flow: column;
  place-items: center start;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--f-text);
  font-size: var(--t-sm);
  font-weight: 500;
  border-color: transparent;
  background: none;
  backdrop-filter: none;
}
.theme-toggle--side:hover { background: var(--paper-2); box-shadow: none; border-color: transparent; }
.theme-toggle--side svg { position: relative; flex: 0 0 auto; }
.theme-toggle--side .theme-toggle__ico { position: relative; width: 19px; height: 19px; display: grid; place-items: center; }
.theme-toggle--side .theme-toggle__ico svg { position: absolute; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: opacity .01ms; transform: none !important; }
  html.theme-anim, html.theme-anim * { transition: none !important; }
}

/* ==========================================================================
   Logotipo sensivel ao tema
   Os dois arquivos oficiais convivem no HTML; o CSS decide qual aparece.
   Sem troca de src, sem piscada, sem JavaScript.
   ========================================================================== */

.logo { display: block; }
.logo__img--dark { display: none; }
[data-theme="dark"] .logo__img--light { display: none; }
[data-theme="dark"] .logo__img--dark  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo__img--light { display: none; }
  :root:not([data-theme="light"]) .logo__img--dark  { display: block; }
}