/* =====================================================================
   Fint UI · tokens.css
   Sistema visual do site institucional da FINTIH.

   Paleta do Presence System v1.1: papel quente, tinta quente e bronze.
   Os valores vieram do próprio manual, não de estimativa.
   Elementos de marca: The Gap (linha interrompida a 62%) e o Ponto Fintih.

   Camadas
   1. Primitivos ....... paletas cruas (não usar direto em componentes)
   2. Semânticos ....... papéis: fundo, superfície, texto, borda, ação, feedback
   3. Tema escuro ...... redefine só os semânticos
   ===================================================================== */

:root {
  /* ─────────────── 1. PRIMITIVOS ─────────────── */

  /* Tinta e papel do manual. Não são neutros puros: puxam para o quente,
     e é isso que separa a marca de um preto-e-branco genérico. */
  --preto: #1a1a18;
  --cinza-950: #272725;   /* tinta do manual */
  --cinza-900: #333331;
  --cinza-800: #3f3f3c;
  --cinza-700: #4a4a47;   /* texto forte do manual */
  --cinza-600: #5e5e5a;
  --cinza-500: #7a7a76;   /* texto de apoio do manual */
  --cinza-400: #9b998f;
  --cinza-300: #d3c9b6;   /* areia média */
  --cinza-200: #d8d2c6;
  --cinza-100: #e4dcd0;   /* areia clara, fundo de cartão */
  --cinza-50: #f2efe9;    /* papel do manual */
  --branco: #f7f5f1;      /* papel claro; o branco puro não entra */

  /* Bronze: o acento do manual. O 500 é o valor oficial; os tons escuros
     existem só para o bronze poder virar texto sobre papel sem perder
     contraste — sobre fundo claro o #b89b72 não é legível. */
  --bronze-50: #faf7f1;
  --bronze-100: #f0e9dc;
  --bronze-200: #e2d5be;
  --bronze-300: #d0bd9c;
  --bronze-400: #c4ac86;
  --bronze-500: #b89b72;  /* oficial */
  --bronze-600: #9a7f56;
  --bronze-700: #7d6543;
  --bronze-800: #5d4b32;
  --bronze-900: #3d3121;

  /* ─────────────── 2. SEMÂNTICOS · TEMA CLARO ─────────────── */
  color-scheme: light;

  /* Fundo e superfícies */
  --bg: var(--branco);
  --bg-subtle: var(--cinza-50);
  --surface: var(--branco);
  --surface-2: var(--cinza-50);
  --surface-raised: var(--branco);
  --surface-inverse: var(--preto);
  --scrim: rgba(10, 10, 10, 0.45);

  /* Texto */
  --text: var(--preto);
  --text-2: var(--cinza-600);
  --text-3: var(--cinza-600);
  --text-disabled: var(--cinza-300);
  --text-inverse: var(--branco);
  --text-accent: var(--bronze-700);
  --text-link: var(--bronze-800);

  /* Bordas e foco */
  --border: rgba(10, 10, 10, 0.1);
  --border-strong: rgba(10, 10, 10, 0.2);
  --border-field: rgba(10, 10, 10, 0.45);
  --border-field-hover: rgba(10, 10, 10, 0.75);
  --focus: var(--bronze-700);
  --focus-soft: rgba(0, 47, 167, 0.18);

  /* Camadas de interação */
  --hover-tint: rgba(10, 10, 10, 0.05);
  --press-tint: rgba(10, 10, 10, 0.09);
  --selected-tint: rgba(0, 47, 167, 0.08);

  /* Ações */
  /* A ação principal é tinta, não cor. O bronze aparece em link e foco;
     o bronze, só no Ponto, nos fios e nos sinais pequenos. */
  --action-primary: var(--preto);
  --action-primary-hover: var(--cinza-800);
  --action-primary-press: var(--cinza-900);
  --action-primary-fg: var(--branco);
  --action-ink: var(--preto);
  --action-ink-hover: var(--cinza-800);
  --action-ink-fg: var(--branco);
  /* O botão de destaque é vidro: pousa sobre foto sem tapá-la. */
  --action-accent: rgba(255, 255, 255, 0.5);
  --action-accent-hover: rgba(255, 255, 255, 0.7);
  --action-accent-fg: var(--preto);
  --action-disabled: rgba(10, 10, 10, 0.06);

  /* Acento (links, indicadores, progresso) */
  --accent: var(--bronze-600);
  --accent-soft: rgba(0, 47, 167, 0.1);
  --on-accent: var(--branco);

  /* Controles marcados (checkbox, radio, switch, slider): tinta */
  --control-on: var(--preto);
  --on-control: var(--branco);

  /* Sinal: o bronze do manual */
  --signal: var(--bronze-500);
  --signal-strong: var(--bronze-600);
  --signal-ink: var(--bronze-800);
  --on-signal: var(--preto);

  /* Feedback · três tons, sem vermelho nem laranja
     sucesso = tinta · informação = bronze · atenção/erro = tinta (com ícone e borda dupla) */
  --success: var(--cinza-950);
  --success-solid: var(--cinza-950);
  --success-soft: var(--cinza-100);
  --success-border: var(--cinza-700);
  --on-success: var(--preto);
  --info: var(--bronze-800);
  --info-solid: var(--bronze-600);
  --info-soft: var(--bronze-50);
  --info-border: var(--bronze-300);
  --on-info: var(--branco);
  --danger: var(--preto);
  --danger-solid: var(--preto);
  --danger-soft: rgba(10, 10, 10, 0.05);
  --danger-border: var(--preto);
  --on-danger: var(--branco);

  /* Vidro.
     Translúcido de verdade: a imagem atrás precisa continuar legível através
     dele. O que vende o material não é a opacidade, é o conjunto — desfoque
     largo, saturação, um brilho especular no topo e um fio de luz na borda. */
  --glass: rgba(255, 255, 255, 0.42);
  --glass-strong: rgba(255, 255, 255, 0.66);
  --glass-smoke: rgba(10, 10, 10, 0.34);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(10, 10, 10, 0.06);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  --glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0) 62%);
  --glass-blur: 36px;
  --glass-sat: 180%;

  /* Campos */
  --field-bg: rgba(255, 255, 255, 0.82);
  --field-bg-hover: var(--branco);
  --field-bg-disabled: rgba(10, 10, 10, 0.04);

  /* Controles */
  --track-off: rgba(10, 10, 10, 0.16);
  --tab-indicator: var(--branco);

  /* Cenas (fundos para vidro; no site, a foto real ocupa esse lugar) */
  /* Fundo da página: uma imagem só, fixa, contínua do topo ao rodapé.
     É ela que o vidro desfoca. Troque --page-image pela foto oficial. */
  --page-image: url("../img/totem-marco-dos-corais.jpg");
  --page-veil: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.93));
  --page-filter: grayscale(1) contrast(1.06);
  --page-blur: 26px;

  /* Cenas: vidros coloridos sobre a imagem, sem fundo próprio. */
  --scene-blur: 32px;
  --scene-clear: rgba(255, 255, 255, 0.4);
  --scene-smoke: rgba(12, 12, 14, 0.42);
  --scene-tinta: rgba(39, 39, 37, 0.66);
  --scene-acid: rgba(220, 244, 120, 0.7);
  --scene-grain: 0.1;

  /* ─────────────── TIPOGRAFIA ─────────────── */
  /* Duas opções para comparar no catálogo (html[data-type]).
     Padrão "grotesca": Host Grotesk, a mais próxima da Forma DJR do lettering da marca.
     Com licença web da Forma DJR, basta colocá-la na frente das pilhas abaixo. */
  /* A face dos lockups da marca (WASD e Innovation in Motion) é Archivo
     Black — é ela que está nos arquivos originais. Fica reservada às
     declarações; o resto do site é a grotesca de texto. */
  --font-lockup: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-text: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.025em;

  --fs-display-xl: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
  --fs-display-l: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h1: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --fs-h2: 1.625rem;
  --fs-h3: 1.1875rem;
  --fs-h4: 1rem;
  --fs-body-l: 1.125rem;
  --fs-body: 1rem;
  --fs-body-s: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-code: 0.8125rem;

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-heading: 1.25;
  --lh-body: 1.55;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.015em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ─────────────── ESPAÇAMENTO (base 4) ─────────────── */
  --space-0: 0;
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ─────────────── RAIOS ─────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ─────────────── ALTURAS DE CONTROLE ─────────────── */
  --h-sm: 34px;
  --h-md: 42px;
  --h-lg: 52px;

  /* ─────────────── ÍCONES ─────────────── */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.6;

  /* ─────────────── SOMBRAS ─────────────── */
  --shadow-1: 0 1px 2px rgba(10, 10, 10, 0.06), 0 2px 6px rgba(10, 10, 10, 0.04);
  --shadow-2: 0 2px 4px rgba(10, 10, 10, 0.04), 0 12px 28px -10px rgba(10, 10, 10, 0.16);
  --shadow-3: 0 4px 10px rgba(10, 10, 10, 0.05), 0 22px 48px -14px rgba(10, 10, 10, 0.24);
  --shadow-4: 0 10px 24px rgba(10, 10, 10, 0.07), 0 40px 90px -20px rgba(10, 10, 10, 0.36);

  /* ─────────────── MOVIMENTO ─────────────── */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 560ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ─────────────── LAYOUT DO SITE ─────────────── */
  --site-max: 1280px;
  --site-gutter: clamp(20px, 5vw, 64px);
  --gap-ratio: 62%;

  /* ─────────────── CAMADAS ─────────────── */
  --z-sticky: 40;
  --z-popover: 60;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;
  --z-tooltip: 110;
}

/* Tipografia alternativa: geométrica (Urbanist + Figtree), como nas referências de vidro */
:root[data-type="geometrica"] {
  --font-display: "Urbanist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-text: "Figtree", "Helvetica Neue", Arial, system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.03em;
}

/* ─────────────── 3. SEMÂNTICOS · TEMA ESCURO ─────────────── */
/* O site nasce escuro. O quase-preto, os fios de 8% de branco e a pílula
   branca vieram da Danyalgil — a casa irmã da FINTIH — e é essa a voz que o
   institucional passa a falar. O bronze do manual entra como detalhe: aurora,
   Ponto e fios. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Fundo: quase-preto em três degraus. Não é #000: o preto puro fecha a
       página e não deixa a superfície do cartão aparecer. */
    --bg: #060606;
    --bg-subtle: #0a0a0a;
    --surface: #0f0f10;
    --surface-2: #141416;
    --surface-raised: #0f0f10;
    --surface-inverse: #f5f5f5;
    --scrim: rgba(0, 0, 0, 0.72);

    /* Texto: branco em três opacidades, não três cinzas. Assim o texto pertence
       ao fundo em vez de flutuar sobre ele. */
    --text: rgba(255, 255, 255, 0.92);
    --text-2: rgba(255, 255, 255, 0.68);
    --text-3: rgba(255, 255, 255, 0.48);
    --text-disabled: rgba(255, 255, 255, 0.3);
    --text-inverse: #0a0a0a;
    --text-accent: var(--bronze-300);
    --text-link: var(--bronze-200);

    /* Fios, não bordas: 8% e 12% de branco. */
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
    --border-field: rgba(255, 255, 255, 0.18);
    --border-field-hover: rgba(255, 255, 255, 0.34);
    --focus: rgba(255, 255, 255, 0.72);
    --focus-soft: rgba(255, 255, 255, 0.14);

    --hover-tint: rgba(255, 255, 255, 0.06);
    --press-tint: rgba(255, 255, 255, 0.1);
    --selected-tint: rgba(255, 255, 255, 0.1);

    /* A ação principal é a pílula branca. */
    --action-primary: #ffffff;
    --action-primary-hover: rgba(255, 255, 255, 0.92);
    --action-primary-press: rgba(255, 255, 255, 0.84);
    --action-primary-fg: #0a0a0a;
    --action-ink: #ffffff;
    --action-ink-hover: rgba(255, 255, 255, 0.92);
    --action-ink-fg: #0a0a0a;
    /* A secundária é só um fio: 5% de branco dentro de uma borda de 8%. */
    --action-accent: rgba(255, 255, 255, 0.05);
    --action-accent-hover: rgba(255, 255, 255, 0.1);
    --action-accent-fg: rgba(255, 255, 255, 0.92);
    --action-disabled: rgba(255, 255, 255, 0.06);

    --accent: var(--bronze-400);
    --accent-soft: rgba(184, 155, 114, 0.16);
    --on-accent: #0a0a0a;
    --control-on: #ffffff;
    --on-control: #0a0a0a;
    --signal: var(--bronze-500);
    --signal-strong: var(--bronze-400);
    --signal-ink: var(--bronze-300);
    --on-signal: #0a0a0a;

    --success: rgba(255, 255, 255, 0.92);
    --success-solid: #ffffff;
    --success-soft: rgba(255, 255, 255, 0.06);
    --success-border: rgba(255, 255, 255, 0.22);
    --info: var(--bronze-300);
    --info-solid: var(--bronze-500);
    --info-soft: rgba(184, 155, 114, 0.1);
    --info-border: rgba(184, 155, 114, 0.32);
    --danger: rgba(255, 255, 255, 0.92);
    --danger-solid: #ffffff;
    --danger-soft: rgba(255, 255, 255, 0.06);
    --danger-border: rgba(255, 255, 255, 0.4);
    --on-danger: #0a0a0a;

    /* Vidro sobre preto é outra coisa: o véu quase não existe (4%), o brilho é
       um fio, e quem separa o cartão do fundo é a sombra funda. */
    --glass: rgba(255, 255, 255, 0.04);
    --glass-strong: rgba(255, 255, 255, 0.07);
    --glass-smoke: rgba(0, 0, 0, 0.42);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-edge: transparent;
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0) 68%);
    --glass-blur: 18px;
    --glass-sat: 130%;

    --field-bg: rgba(255, 255, 255, 0.04);
    --field-bg-hover: rgba(255, 255, 255, 0.07);
    --field-bg-disabled: rgba(255, 255, 255, 0.03);
    --track-off: rgba(255, 255, 255, 0.14);
    --tab-indicator: rgba(255, 255, 255, 0.08);

    /* O fundo da página deixa de ser foto: é o quase-preto com as auroras por
       cima (ver .site-ground). A foto continua existindo, mas dentro dos cases,
       que é onde ela conta alguma coisa. */
    --page-image: none;
    --page-veil: none;
    --page-filter: none;
    --page-blur: 0px;

    /* Auroras: manchas radiais larguíssimas em bronze e azul, em opacidade
       baixíssima e no modo screen. É o que tira o preto de chapado. */
    --aurora-bronze-0: rgba(255, 201, 107, 0.16);
    --aurora-bronze-1: rgba(255, 170, 64, 0.1);
    --aurora-bronze-2: rgba(255, 220, 140, 0.07);
    --aurora-frio-0: rgba(60, 148, 255, 0.14);
    --aurora-frio-1: rgba(0, 214, 255, 0.08);
    --grain: 0.05;
  --ponto-ring: rgba(255, 255, 255, 0.16);

    --scene-clear: rgba(255, 255, 255, 0.03);
    --scene-smoke: rgba(0, 0, 0, 0.5);
    --scene-tinta: rgba(15, 15, 16, 0.72);
    --scene-areia: rgba(228, 220, 208, 0.08);
    --scene-grain: 0.05;

    /* Uma sombra só, funda e difusa, como na referência. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.65);
    --shadow-3: 0 18px 60px rgba(0, 0, 0, 0.7);
    --shadow-4: 0 30px 90px rgba(0, 0, 0, 0.78);
  }
}

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

  /* Fundo: quase-preto em três degraus. Não é #000: o preto puro fecha a
     página e não deixa a superfície do cartão aparecer. */
  --bg: #060606;
  --bg-subtle: #0a0a0a;
  --surface: #0f0f10;
  --surface-2: #141416;
  --surface-raised: #0f0f10;
  --surface-inverse: #f5f5f5;
  --scrim: rgba(0, 0, 0, 0.72);

  /* Texto: branco em três opacidades, não três cinzas. Assim o texto pertence
     ao fundo em vez de flutuar sobre ele. */
  --text: rgba(255, 255, 255, 0.92);
  --text-2: rgba(255, 255, 255, 0.68);
  --text-3: rgba(255, 255, 255, 0.48);
  --text-disabled: rgba(255, 255, 255, 0.3);
  --text-inverse: #0a0a0a;
  --text-accent: var(--bronze-300);
  --text-link: var(--bronze-200);

  /* Fios, não bordas: 8% e 12% de branco. */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-field: rgba(255, 255, 255, 0.18);
  --border-field-hover: rgba(255, 255, 255, 0.34);
  --focus: rgba(255, 255, 255, 0.72);
  --focus-soft: rgba(255, 255, 255, 0.14);

  --hover-tint: rgba(255, 255, 255, 0.06);
  --press-tint: rgba(255, 255, 255, 0.1);
  --selected-tint: rgba(255, 255, 255, 0.1);

  /* A ação principal é a pílula branca. */
  --action-primary: #ffffff;
  --action-primary-hover: rgba(255, 255, 255, 0.92);
  --action-primary-press: rgba(255, 255, 255, 0.84);
  --action-primary-fg: #0a0a0a;
  --action-ink: #ffffff;
  --action-ink-hover: rgba(255, 255, 255, 0.92);
  --action-ink-fg: #0a0a0a;
  /* A secundária é só um fio: 5% de branco dentro de uma borda de 8%. */
  --action-accent: rgba(255, 255, 255, 0.05);
  --action-accent-hover: rgba(255, 255, 255, 0.1);
  --action-accent-fg: rgba(255, 255, 255, 0.92);
  --action-disabled: rgba(255, 255, 255, 0.06);

  --accent: var(--bronze-400);
  --accent-soft: rgba(184, 155, 114, 0.16);
  --on-accent: #0a0a0a;
  --control-on: #ffffff;
  --on-control: #0a0a0a;
  --signal: var(--bronze-500);
  --signal-strong: var(--bronze-400);
  --signal-ink: var(--bronze-300);
  --on-signal: #0a0a0a;

  --success: rgba(255, 255, 255, 0.92);
  --success-solid: #ffffff;
  --success-soft: rgba(255, 255, 255, 0.06);
  --success-border: rgba(255, 255, 255, 0.22);
  --info: var(--bronze-300);
  --info-solid: var(--bronze-500);
  --info-soft: rgba(184, 155, 114, 0.1);
  --info-border: rgba(184, 155, 114, 0.32);
  --danger: rgba(255, 255, 255, 0.92);
  --danger-solid: #ffffff;
  --danger-soft: rgba(255, 255, 255, 0.06);
  --danger-border: rgba(255, 255, 255, 0.4);
  --on-danger: #0a0a0a;

  /* Vidro sobre preto é outra coisa: o véu quase não existe (4%), o brilho é
     um fio, e quem separa o cartão do fundo é a sombra funda. */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --glass-smoke: rgba(0, 0, 0, 0.42);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-edge: transparent;
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0) 68%);
  --glass-blur: 18px;
  --glass-sat: 130%;

  --field-bg: rgba(255, 255, 255, 0.04);
  --field-bg-hover: rgba(255, 255, 255, 0.07);
  --field-bg-disabled: rgba(255, 255, 255, 0.03);
  --track-off: rgba(255, 255, 255, 0.14);
  --tab-indicator: rgba(255, 255, 255, 0.08);

  /* O fundo da página deixa de ser foto: é o quase-preto com as auroras por
     cima (ver .site-ground). A foto continua existindo, mas dentro dos cases,
     que é onde ela conta alguma coisa. */
  --page-image: none;
  --page-veil: none;
  --page-filter: none;
  --page-blur: 0px;

  /* Auroras: manchas radiais larguíssimas em bronze e azul, em opacidade
     baixíssima e no modo screen. É o que tira o preto de chapado. */
  --aurora-bronze-0: rgba(255, 201, 107, 0.16);
  --aurora-bronze-1: rgba(255, 170, 64, 0.1);
  --aurora-bronze-2: rgba(255, 220, 140, 0.07);
  --aurora-frio-0: rgba(60, 148, 255, 0.14);
  --aurora-frio-1: rgba(0, 214, 255, 0.08);
  --grain: 0.05;
  --ponto-ring: rgba(255, 255, 255, 0.16);

  --scene-clear: rgba(255, 255, 255, 0.03);
  --scene-smoke: rgba(0, 0, 0, 0.5);
  --scene-tinta: rgba(15, 15, 16, 0.72);
  --scene-areia: rgba(228, 220, 208, 0.08);
  --scene-grain: 0.05;

  /* Uma sombra só, funda e difusa, como na referência. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.65);
  --shadow-3: 0 18px 60px rgba(0, 0, 0, 0.7);
  --shadow-4: 0 30px 90px rgba(0, 0, 0, 0.78);
}

/* Auroras e grão também no claro, só que muito mais discretos. */
:root {
  --aurora-bronze-0: rgba(184, 155, 114, 0.14);
  --aurora-bronze-1: rgba(184, 155, 114, 0.08);
  --aurora-bronze-2: rgba(212, 190, 150, 0.06);
  --aurora-frio-0: rgba(120, 150, 200, 0.1);
  --aurora-frio-1: rgba(120, 180, 210, 0.06);
  --grain: 0.035;
  --ponto-ring: rgba(39, 39, 37, 0.3);
}