/* tokens.css · Brasil Scat Comunidade V3 · foundation consolidado.
   Origem: DS antigo (bs-*) + protótipo V3 + decisões D01–D17 (ver FOUNDATION-FINAL.md).
   Camadas: 1) primitivos (família-passo)  2) semânticos  3) domínio (categoria, nível, menu, presença). */

/* Fonte: Satoshi (./fonts, em .woff2 com .otf de reserva). Peso 600 não existe: use 500 ou 700. */
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Light.woff2') format('woff2'),url('fonts/Satoshi-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Regular.woff2') format('woff2'),url('fonts/Satoshi-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Medium.woff2') format('woff2'),url('fonts/Satoshi-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Bold.woff2') format('woff2'),url('fonts/Satoshi-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Black.woff2') format('woff2'),url('fonts/Satoshi-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  /* ============ 1. PRIMITIVOS DE COR ============ */
  --black:#000000;--white:#ffffff;
  /* Cinza (neutro azulado) */
  --gray-50:#f4f4f6;--gray-100:#e4e5ea;--gray-200:#c0c4d0;--gray-300:#a0a2af;--gray-400:#9395a3;--gray-500:#6c6f7f;--gray-600:#4a4b53;--gray-700:#38383e;--gray-750:#32333a;--gray-800:#2d2e34;--gray-850:#25262b;--gray-900:#1d1e22;--gray-950:#121316;
  /* Rosa (marca) */
  --pink-50:#fff3f6;--pink-100:#fedde5;--pink-200:#fec0cf;--pink-300:#ff9db9;--pink-400:#ff74a1;--pink-500:#e8547a;--pink-600:#c13e6e;--pink-700:#9b2553;--pink-800:#790b3c;--pink-900:#590029;--pink-950:#340015;
  /* Vermelho */
  --red-50:#fff4f3;--red-100:#fedcda;--red-200:#fdbdb9;--red-300:#fd9995;--red-400:#ff6b6b;--red-500:#dc5456;--red-600:#ba3e41;--red-700:#9a292e;--red-800:#7a101b;--red-900:#5a010d;--red-950:#370004;
  /* Laranja */
  --orange-50:#fff4ef;--orange-100:#fee4d5;--orange-200:#ffceb2;--orange-300:#fdb68d;--orange-400:#ff9a5c;--orange-500:#da7e44;--orange-600:#b6632c;--orange-700:#954a14;--orange-800:#703304;--orange-900:#4e2100;--orange-950:#2c0e00;
  /* Bronze */
  --bronze-50:#fdf5f0;--bronze-100:#f4e0d1;--bronze-200:#e9c5ab;--bronze-300:#dca882;--bronze-400:#cd8a57;--bronze-500:#b07343;--bronze-600:#935c30;--bronze-700:#79471e;--bronze-800:#5f320a;--bronze-900:#462000;--bronze-950:#2a1000;
  /* Âmbar */
  --amber-50:#fcf6ed;--amber-100:#faeacf;--amber-200:#f7daaa;--amber-300:#f4c97f;--amber-400:#f0b64a;--amber-500:#cc972f;--amber-600:#a8780d;--amber-700:#865e00;--amber-800:#614402;--amber-900:#422c00;--amber-950:#231500;
  /* Amarelo */
  --yellow-50:#f9f7ed;--yellow-100:#f2edcf;--yellow-200:#eae0aa;--yellow-300:#e2d17f;--yellow-400:#d9c24a;--yellow-500:#b7a22f;--yellow-600:#96820b;--yellow-700:#766600;--yellow-800:#564a02;--yellow-900:#3a3100;--yellow-950:#1e1800;
  /* Verde */
  --green-50:#effaf2;--green-100:#d6f3dd;--green-200:#b4ebc3;--green-300:#8ee1a7;--green-400:#5fd68a;--green-500:#45b56f;--green-600:#299456;--green-700:#06773e;--green-800:#00572b;--green-900:#013b1c;--green-950:#001f0b;
  /* Verde-água */
  --teal-50:#eefaf8;--teal-100:#d3f3ee;--teal-200:#b0eae2;--teal-300:#86e0d5;--teal-400:#4dd6c8;--teal-500:#2fb4a8;--teal-600:#039489;--teal-700:#08746b;--teal-800:#00554e;--teal-900:#013934;--teal-950:#001e1b;
  /* Azul-céu */
  --sky-50:#eff8fe;--sky-100:#d5efff;--sky-200:#b4e3fe;--sky-300:#8fd6fe;--sky-400:#5cc8ff;--sky-500:#42a8da;--sky-600:#2688b6;--sky-700:#026c95;--sky-800:#044f6d;--sky-900:#00354b;--sky-950:#001b2a;
  /* Índigo */
  --indigo-50:#f4f6ff;--indigo-100:#dbe2ff;--indigo-200:#bcc8fd;--indigo-300:#9babff;--indigo-400:#7b8cff;--indigo-500:#6674de;--indigo-600:#525dbd;--indigo-700:#3f499f;--indigo-800:#2d3381;--indigo-900:#1d1f65;--indigo-950:#0e0a49;
  /* Roxo */
  --purple-50:#f8f5ff;--purple-100:#e9e1ff;--purple-200:#d8c7fe;--purple-300:#c6abfe;--purple-400:#b48cff;--purple-500:#9873dc;--purple-600:#7d5bba;--purple-700:#65449b;--purple-800:#4c2e7b;--purple-900:#36195f;--purple-950:#200241;

  /* ============ 2. SEMÂNTICOS ============ */
  --bg-canvas:var(--gray-900);--bg-surface:var(--gray-800);--bg-surface-raised:var(--gray-700);--bg-surface-overlay:var(--gray-600);
  --bg-field:var(--gray-850);--bg-surface-zebra:color-mix(in srgb,var(--gray-750) 50%,var(--gray-800));   /* linhas alternadas de uma lista dentro de card (Ranking) */
  --bg-inverse:var(--white);
  /* translúcidos: só dois */
  --bg-scrim:rgba(0,0,0,.68);                  /* escurece a tela atrás de modal/sheet */
  --bg-on-image:rgba(0,0,0,.55);               /* fundo de qualquer controle sobre imagem */
  --gradient-image-shade:linear-gradient(180deg,var(--bg-on-image),var(--black));
  --indicator-notification:var(--pink-400);   /* bolinha de notificação (rosa, como no protótipo) */

  --text-primary:var(--white);--text-secondary:var(--gray-300);--text-tertiary:var(--gray-400);--text-inverse:var(--gray-900);--text-inverse-secondary:var(--gray-600);
  --bg-tabbar:var(--gray-300);--text-brand:var(--pink-400);--text-on-brand-fill:var(--gray-950);--text-on-solid:var(--gray-950);--text-on-image:var(--gray-100);
  --text-danger:var(--red-400);--text-success:var(--green-400);--text-warning:var(--amber-400);--text-info:var(--sky-400);

  --border-subtle:rgba(255,255,255,.06);--border-default:var(--gray-700);--border-strong:var(--gray-600);--border-field:var(--gray-600);--border-control:var(--gray-750);--border-focus:var(--pink-400);

  --interactive-primary:var(--pink-400);--interactive-primary-hover:var(--pink-300);--interactive-primary-active:var(--pink-200);
  --interactive-primary-subtle:color-mix(in srgb,var(--pink-400) 15%,transparent);

  --status-success:var(--green-400);--status-danger:var(--red-400);--status-warning:var(--amber-400);--status-info:var(--sky-400);
  --status-success-bg:color-mix(in srgb,var(--green-400) 14%,transparent);--status-danger-bg:color-mix(in srgb,var(--red-400) 14%,transparent);
  --status-warning-bg:color-mix(in srgb,var(--amber-400) 14%,transparent);--status-info-bg:color-mix(in srgb,var(--sky-400) 14%,transparent);

  --gradient-brand:linear-gradient(90deg,var(--pink-400),var(--pink-300));
  --interactive-accent:var(--pink-400);       /* rosa de destaque sobre foto e fundo escuro: seta, selo e tag "Seu perfil" do Profile card */
  --gradient-profile-photo:linear-gradient(180deg,color-mix(in srgb,var(--bg-canvas) 50%,transparent) 0%,transparent 24%,transparent 42%,var(--bg-canvas) 100%);  /* degradê do Profile card */
  --gradient-affinity-max:linear-gradient(90deg,var(--pink-400),var(--purple-400),var(--sky-400));  /* tag de 100% de afinidade (animada) */

  /* ============ 3. DOMÍNIO ============ */
  --cat-confissao:var(--purple-400);--cat-vontade:var(--red-400);--cat-duvida:var(--sky-400);--cat-debate:var(--orange-400);--cat-enquete:var(--green-400);--cat-indicacao:var(--teal-400);--cat-conversa:var(--purple-400);--cat-procuro:var(--pink-400);--cat-vendo:var(--yellow-400);
  --stat-pink:var(--pink-400);--stat-green:var(--green-400);--stat-sky:var(--sky-400);--stat-purple:var(--purple-400);--stat-amber:var(--amber-400);   /* cor do ícone do Stat (bs-stat--*) */
  --fetiche:var(--purple-400);   /* chip de fetiche das Histórias: uma cor só para todos */
  --nivel-bronze:var(--bronze-400);--nivel-prata:var(--gray-200);--nivel-ouro:var(--amber-400);--nivel-diamante:var(--sky-300);   /* LEGADO: 4 faixas do sistema antigo de 10 níveis; o tema ainda usa. Sai quando o Respeito (8 níveis) for aplicado no tema. */
  --nivel-1:var(--green-400);--nivel-2:var(--sky-400);--nivel-3:var(--orange-400);--nivel-4:var(--yellow-400);--nivel-5:var(--pink-400);--nivel-6:var(--purple-400);--nivel-7:var(--red-400);--nivel-8:var(--teal-400);   /* Respeito: 8 níveis (16/10/2026); cada cor acompanha o badge do nível (badges/) */
  --nivel-5-alt:var(--purple-400);--nivel-6-alt:var(--indigo-400);--nivel-7-alt:var(--orange-400);   /* segunda cor do contorno animado, níveis 5 a 7 */
  --gradient-nivel-holo:linear-gradient(115deg,var(--purple-300),var(--pink-200),var(--amber-100),var(--teal-200),var(--sky-300),var(--purple-300));   /* nível 8: efeito holográfico (lilás, rosa, creme, menta, azul); a última cor repete a primeira para o loop fechar */
  --nav-inicio:var(--gray-100);--nav-ler:var(--green-400);--nav-artigos:var(--green-400);--nav-hentais:var(--orange-400);--nav-mural:var(--amber-400);--nav-historias:var(--purple-400);--nav-glossario:var(--yellow-400);--nav-ranking:var(--teal-400);--nav-perfis:var(--sky-400);--nav-match:var(--pink-400);--nav-mensagens:var(--indigo-400);--nav-notificacoes:var(--red-400);--nav-perfil:var(--green-400);--nav-contos:var(--artigo-contos);--nav-livros:var(--bronze-400);--nav-sites:var(--red-400);--nav-menu:var(--pink-400);--nav-conquistas:var(--amber-400);--nav-respeito:var(--pink-400);--nav-estilopig:var(--pink-400);--nav-ajuda:var(--gray-300);--nav-avaliar:var(--amber-400);
  --banner-pink:var(--pink-400);--banner-purple:var(--purple-400);
  --brand-telegram:#229ED9;   /* azul da marca Telegram: só o botão de login (bs-social-btn--telegram). Cor de marca de terceiros, exceção como as cores do logo do Google */
  --bg-hero-card:var(--pink-800);--text-on-hero-card:var(--pink-100);   /* Hero card: fundo sólido (sem gradiente) e texto de apoio */
  --arquetipo-porquinho:var(--orange-400);--arquetipo-fluido:var(--sky-400);--arquetipo-sensorial:var(--purple-400);--arquetipo-estrategista:var(--teal-400);--arquetipo-jogador:var(--green-400);--arquetipo-showman:var(--yellow-400);  /* rascunho: reaproveita a paleta das categorias */
  --raridade-comum:var(--gray-300);--raridade-rara:var(--sky-400);--raridade-epica:var(--purple-400);--raridade-lendaria:var(--amber-400);   /* Conquistas: cor de cada raridade (sempre junto de nome e losangos, nunca só a cor) */
  --presenca-aberta:var(--green-400);--presenca-olhando:var(--gray-300);--presenca-procurando:var(--pink-400);

  /* ============ TIPOGRAFIA ============ */
  --font-titulo:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-corpo:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-size-10:10px;--font-size-12:12px;--font-size-14:14px;--font-size-16:16px;--font-size-18:18px;--font-size-20:20px;--font-size-24:24px;--font-size-28:28px;--font-size-32:32px;--font-size-40:40px;--font-size-48:48px;
  --font-weight-light:300;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;--font-weight-black:900;
  --line-height-tight:1.1;--line-height-snug:1.25;--line-height-normal:1.5;--line-height-relaxed:1.6;

  /* ============ ESPAÇAMENTO (múltiplos de 4; D09 A) ============ */
  --space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:96px;

  /* ============ FORMA ============ */
  --radius-2xs:2px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-pill:999px;--radius-circle:50%;
  --radius-card-photo:32px;                    /* Profile card: fora da escala (a escala termina em 24). Era 64; 32 testado em 16/10/2026 (20 é a alternativa) */
  --stroke-hairline:1px;--stroke-medium:1.5px;--stroke-thin:2px;--stroke-thick:4px;
  --focus-ring:2px solid var(--border-focus);--focus-offset:2px;

  /* ============ TAMANHOS ============ */
  --size-chart-donut:220px;--size-chart-stack:32px;--size-chart-dots:280px;--size-chart-bubbles:320px;--size-map-max:480px;
  --size-control-sm:36px;--size-control-md:44px;--size-control-lg:48px;--size-pill-h:30px;--size-badge-h:22px;--size-switch-w:52px;--size-switch-h:30px;--size-progress-track:8px;
  --size-icon-2xs:12px;--size-icon-xs:14px;--size-icon-sm:16px;--size-icon-md:20px;--size-icon-lg:24px;--size-icon-xl:32px;
  --size-menu-tile-icon:80px;                  /* quadrado do ícone do Menu tile (a altura do tile) */
  --size-hero-card-min:240px;                  /* altura mínima do Hero card no desktop */
  --size-avatar-xs:24px;--size-avatar-sm:32px;--size-avatar-md:40px;--size-avatar-lg:48px;--size-avatar-xl:64px;--size-avatar-2xl:96px;--size-avatar-3xl:128px;
  --radius-avatar-xs:var(--radius-sm);--radius-avatar-sm:var(--radius-sm);--radius-avatar-md:var(--radius-md);--radius-avatar-lg:var(--radius-md);--radius-avatar-xl:var(--radius-lg);--radius-avatar-2xl:var(--radius-lg);--radius-avatar-3xl:var(--radius-xl);  /* raio do avatar QUADRADO por tamanho */

  --size-logo-sidebar:96px;                    /* largura do logo da Sidebar (logo.svg) */
  --size-logo-lg:128px;                        /* largura do logo grande (modal de login) */
  --size-logo-header:72px;                     /* largura do logo no header do celular */
  --size-tab-label-max:88px;                   /* largura máxima do nome no item ativo da Tab bar */
  --size-tab-item:48px;                        /* botão redondo da Tab bar */
  --size-card-action:64px;                     /* botão seta do Profile card, tamanho grande */
  --size-profile-card-min:220px;               /* largura mínima do Profile card na grade (4 colunas em 1004px de conteúdo) */
  --ratio-post-photo:3 / 2;                    /* proporção da foto dentro do Post card (27/10/2026) */
  --size-post-photo-max:420px;                 /* altura máxima dessa foto no desktop */
  --size-bubble-media:280px;                   /* largura do balão com fotos no Chat (1 a 3 fotos; 09/11/2026) */
  --ratio-bubble-photo-wide:4 / 3;             /* foto única mais larga que alta, dentro do balão */
  --ratio-bubble-photo-tall:3 / 4;             /* foto única mais alta que larga, dentro do balão */
  --size-banner-cover:96px;                    /* largura da capa (3:4) do banner com capa */
  --ratio-profile-card:358 / 540;              /* proporção do Profile card, nos dois tamanhos */
  --size-stat-min:160px;                       /* largura mínima do Stat na grade (2 colunas no celular, 4 no desktop) */
  --size-achievement-min:300px;                /* largura mínima de um Achievement na grade (3 colunas em 1004px de conteúdo) */
  --size-help-card-min:220px;                  /* largura mínima de um Card na grade da Help page (3 colunas no container de 760) */
  --breadcrumb-max:20ch;                        /* limite da página atual no Breadcrumb (celular); no desktop vale --breadcrumb-max-desk. Passou disso vira … */
  --breadcrumb-max-desk:32ch;
  --size-article-thumb:80px;                   /* miniatura do Article card compacto (Continue lendo) */
  --size-article-rank-w:128px;--size-article-rank-h:176px;   /* capa e altura do Article card numerado (Mais lidos) */
  --size-article-side:280px;                   /* coluna lateral do Article (compartilhar + continue lendo) */
  --text-prose:var(--white);                   /* texto corrido de artigo: branco (hierarquia vem dos subtítulos rosa em negrito) */
  --line-height-prose:1.75;
  --artigo-scat:var(--orange-400);--artigo-fetiche:var(--pink-400);--artigo-saude:var(--green-400);--artigo-golden-shower:var(--amber-400);--artigo-entrevistas:var(--purple-400);--artigo-contos:var(--indigo-400);--artigo-outras:var(--teal-400);   /* cor da tag por categoria do blog */
  --ratio-profile-hero:9 / 16;                 /* proporção do Profile hero no celular (foto em tela cheia) */
  --blur-photo-locked:16px;                    /* foto embaçada para quem não está logado */

  /* ============ ELEVAÇÃO, CAMADAS, OPACIDADE, MOVIMENTO ============ */
  --shadow-lg:0 8px 24px rgba(0,0,0,.40);--shadow-xl:0 8px 32px rgba(0,0,0,.60);--shadow-top:0 -8px 24px rgba(0,0,0,.25);
  --z-base:0;--z-raised:1;--z-overlap:2;--z-controls:3;--z-popover:10;--z-sticky:50;--z-modal:100;--z-toast:200;
  --opacity-disabled:.5;--opacity-muted:.7;
  --duration-base:.2s;--duration-slow:.3s;--duration-ambient:3.5s;--duration-lively:1.6s;--ease-standard:ease;--ease-spring:cubic-bezier(.34,1.3,.64,1);--ease-enter:ease-out;--transition-default:var(--duration-base) var(--ease-standard);

  /* ============ LAYOUT ============ */
  --bp-desktop:960px;--bp-wide:1280px;
  --layout-sidebar:240px;--layout-content:1040px;--layout-form:760px;--layout-sheet:580px;--layout-drawer:480px;--layout-topbar:60px;
}

/* escala de texto (classes) */
.bs-type-display{font-family:var(--font-titulo);font-size:48px;line-height:1.1;font-weight:700}
.bs-type-h1{font-family:var(--font-titulo);font-size:40px;line-height:1.1;font-weight:700}
.bs-type-h2{font-family:var(--font-titulo);font-size:32px;line-height:1.25;font-weight:700}
.bs-type-h3{font-family:var(--font-titulo);font-size:28px;line-height:1.25;font-weight:700}
.bs-type-h4{font-family:var(--font-titulo);font-size:24px;line-height:1.25;font-weight:700}
.bs-type-h5{font-family:var(--font-titulo);font-size:20px;line-height:1.5;font-weight:500}
.bs-type-h6{font-family:var(--font-titulo);font-size:18px;line-height:1.5;font-weight:500}
.bs-type-body-lg{font-family:var(--font-corpo);font-size:18px;line-height:1.6;font-weight:400}
.bs-type-body{font-family:var(--font-corpo);font-size:16px;line-height:1.5;font-weight:400}
.bs-type-body-sm{font-family:var(--font-corpo);font-size:14px;line-height:1.5;font-weight:400}
.bs-type-caption{font-family:var(--font-corpo);font-size:12px;line-height:1.5;font-weight:400}
.bs-type-overline{font-family:var(--font-corpo);font-size:10px;line-height:1.5;font-weight:700}
.bs-focus:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}