/* ============================================================
   INFLU RADAR · DESIGN TOKENS — "Papel" v3-claro
   Pele escolhida por Carlos em 2026-09-16: clara e limpa, como os
   wireframes que ele aprovou, mantendo a identidade da proposta
   comercial (menta de ação, mono nos rótulos, hairline, radar).

   Candidato a substituir web/design-tokens.css na F0a.
   Os nomes legados (--white, --navy, --citrus, --blue…) continuam
   sendo ALIASES semânticos, para que web/styles.css e os CSS por
   workspace não precisem mudar junto.

   Contraste medido (WCAG 2.1) contra --paper #FAFAF8 e --surface-1
   #FFFFFF está anotado em cada token de texto. Nada abaixo de 4.5
   carrega informação.
   ============================================================ */


/* ============================================================
   FONTES PRÓPRIAS — servidas do próprio domínio porque o CSP é
   `default-src 'self'` sem `font-src` (herda 'self'): nenhum pedido
   sai para fonts.googleapis.com. Subset latin, que já cobre o
   português. Arquivos variáveis: um por família cobre todos os pesos.
   Licença: SIL Open Font License 1.1 (IBM Plex e Space Grotesk).
   Peso total: 70,9 KB.
   ============================================================ */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Fundos — off-white quente, como no wireframe */
  --paper: #FAFAF8;            /* página */
  --bg-deep: #F4F4EF;          /* faixa mais funda, rodapés */
  --navy: #F5F5F0;             /* sidebar (alias legado) */

  /* Superfícies */
  --surface-1: #FFFFFF;        /* painel padrão */
  --surface-2: #F4F4EF;        /* elevado / hover */
  --soft: #F1F1EC;             /* preenchimento rebaixado (inset) */
  --white: var(--surface-1);

  /* Traços — hairline clara, nunca moldura pesada */
  --line: #E3E3DC;
  --line-strong: #C9C9C2;
  --line-ring: #D8D8D1;        /* anéis do radar decorativo */
  --border: var(--line);

  /* Texto — quatro degraus, todos AA ou melhor */
  --ink: #16181C;              /* 17.0 : 1 — títulos e números */
  --ink-soft: #3A3D43;         /* 10.4 : 1 — corpo forte */
  --muted: #5C6067;            /*  6.1 : 1 — corpo secundário */
  --subtle: #6B6E74;           /*  4.9 : 1 — meta, rótulos mono */
  --faint: #8A8D93;            /*  3.2 : 1 — decorativo e desabilitado, NUNCA informação */
  --text-soft: var(--muted);

  /* Acento — a menta da proposta não é legível como texto sobre claro
     (1.4 : 1), então ela vive como PREENCHIMENTO e o verde profundo
     carrega texto, ícone, link e foco. Dois tokens, uma identidade. */
  --accent: #0E6B52;           /*  6.2 : 1 — texto, link, ícone, foco, estado ativo */
  --accent-fill: #4EF2C0;      /* menta da proposta — preenchimento de ação primária */
  --on-accent: #0A1512;        /* 13.1 : 1 — tinta sobre a MENTA (ação primária) */
  --on-accent-deep: #FFFFFF;   /*  6.5 : 1 — tinta sobre o VERDE PROFUNDO */
  --on-accent-deep: #FFFFFF;   /*  6.5 : 1 — tinta sobre o VERDE PROFUNDO (chips, passos, barras) */
  --accent-hover: #0A5741;     /* hover ESCURECE no claro */
  --accent-fill-hover: #3BE0AE;
  --citrus: var(--accent);     /* aliases legados */
  --blue: var(--accent);
  --blue-dark: var(--accent-hover);

  /* Sinal secundário — o ciano do deck não passa sobre claro;
     o azul profundo carrega o mesmo papel (nota, "opcional", varredura). */
  --cyan: #0B5F8F;             /*  6.6 : 1 */
  --cyan-fill: #34D2FF;        /* ciano da proposta, só como preenchimento/detalhe */
  --violet: var(--cyan);

  /* Semânticos — raros, discretos, todos AA */
  --positive: #0E6B52;         /*  6.2 : 1 */
  --amber: #79591A;            /*  6.2 : 1 — atenção, DEMONSTRAÇÃO */
  --coral: #B23B3B;            /*  5.6 : 1 — risco, erro */
  --teal: var(--accent);

  /* Preenchimentos tintados — leves, nunca berrantes */
  --accent-soft: rgba(14, 107, 82, .08);
  --accent-soft-strong: rgba(14, 107, 82, .12);
  --accent-line: rgba(14, 107, 82, .30);
  --accent-line-strong: rgba(14, 107, 82, .45);
  --accent-ring: rgba(14, 107, 82, .14);
  --cyan-soft: rgba(11, 95, 143, .08);
  --cyan-line: rgba(11, 95, 143, .35);
  --amber-soft: rgba(121, 89, 26, .10);
  --coral-soft: rgba(178, 59, 59, .10);
  --blue-soft: var(--accent-soft);
  --teal-soft: var(--accent-soft);
  --positive-soft: var(--accent-soft);
  --green-soft: var(--accent-soft);
  --surface-soft: rgba(22, 24, 28, .04);

  /* Vidro — só a ficha e a barra mobile */
  --glass-bg: rgba(255, 255, 255, .78);
  --glass-border: rgba(22, 24, 28, .10);
  --glass-blur: 18px;

  /* Gradientes de assinatura — a menta aparece aqui, onde não carrega texto */
  --grad-radar: linear-gradient(90deg, #0E6B52, #0B5F8F);
  --grad-electric: var(--grad-radar);
  --grad-bar: linear-gradient(180deg, #4EF2C0, #0E6B52);
  --grad-bar-idle: linear-gradient(180deg, #DADAD3, #EDEDE7);
  --grad-electric-soft: linear-gradient(115deg, rgba(78, 242, 192, .18), rgba(52, 210, 255, .10));
  --grad-panel: linear-gradient(160deg, #FFFFFF, #FAFAF8 70%);

  /* Geometria — igual à da proposta */
  --radius-xs: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 100px;
  --radius-bar: 3px 3px 0 0;
  --shadow-sm: none;
  --shadow: 0 16px 40px rgba(22, 24, 28, .12);   /* só drawer e diálogo */
  --glow-accent: 0 0 0 4px rgba(14, 107, 82, .12);
  --glow-cyan: 0 0 0 4px rgba(11, 95, 143, .12);
  --glow-blue: var(--glow-accent);
  --glow-teal: var(--glow-accent);

  /* Tipografia — idêntica à da proposta (self-host, subset latin, 71 KB) */
  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking-display: -.03em;
  --tracking-kicker: .24em;
  --tracking-label: .12em;
  --tracking-chip: .10em;

  --fs-display: 32px;  --lh-display: 1.1;
  --fs-h1: 28px;       --lh-h1: 1.12;
  --fs-h2: 20px;       --lh-h2: 1.25;
  --fs-title: 16px;    --lh-title: 1.3;
  --fs-body: 14px;     --lh-body: 1.6;
  --fs-body-lg: 15px;
  --fs-small: 13px;    --lh-small: 1.5;
  --fs-mono: 12px;
  --fs-kicker: 11px;
  --fs-num: 34px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --card-pad: 24px 28px;
  --card-pad-sm: 18px 22px;

  --motion-fast: .12s ease;
  --motion-base: .2s cubic-bezier(.3, .7, .3, 1);
  --motion-reveal: .5s ease-out;
  --motion-stagger: 60ms;
  --motion-sweep: 4s;
  --motion-blip: 2.4s;
  --motion-ping: 1.8s;
  --motion-scan: 3.2s;

  /* Layout responsivo das telas privadas (/private/*) — breakpoints ÚNICOS. @media não lê var(), então os
     números abaixo são o contrato e todo @media novo dessas telas usa exatamente estes valores:
       celular  ≤ 599px   → (max-width: 599px)
       tablet   600–1023  → (min-width: 600px) and (max-width: 1023px)
       desktop  ≥ 1024px  → (min-width: 1024px)
     (Ajustes finos já existentes por componente, como max-width: 360/400/480/520px, continuam valendo dentro do celular.) */
  --bp-tablet: 600px;
  --bp-desktop: 1024px;
  --layout-col-phone: 480px;    /* Creator OS no celular: exatamente como antes */
  --layout-col-tablet: 720px;   /* coluna mais larga no tablet; também o teto de leitura dos formulários */
  --layout-col-desktop: 1040px; /* Creator OS no desktop: painéis e listas usam a largura */
  --layout-col-brand: 1200px;   /* Marca no desktop */
  --layout-sidebar: 232px;      /* navegação lateral do Creator OS no desktop */
  --layout-col-aside: 340px;    /* painel lateral do layout 'split' (S16, editor) no desktop */
  --layout-nav-bottom: 68px;    /* teto da barra inferior sem a área segura (6 + item 52 + 8 + borda 1, arredondado); o respiro do conteúdo deriva dela */
}

/* Regra do botão primário no claro: a menta sozinha não separa do papel
   (1.4 : 1), então a ação primária leva SEMPRE a borda em --accent, que
   dá 6.2 : 1 de contorno. Sem a borda, o botão some no fundo. */

/* Auras determinísticas da ficha — versão clara, saturação contida. */
.ficha-aura-0 { --aura-a: #4EF2C0; --aura-b: #34D2FF; --aura-c: #E3E3DC; }
.ficha-aura-1 { --aura-a: #34D2FF; --aura-b: #4EF2C0; --aura-c: #D8D8D1; }
.ficha-aura-2 { --aura-a: #0E6B52; --aura-b: #4EF2C0; --aura-c: #34D2FF; }
.ficha-aura-3 { --aura-a: #4EF2C0; --aura-b: #D8D8D1; --aura-c: #34D2FF; }
.ficha-aura-4 { --aura-a: #34D2FF; --aura-b: #0E6B52; --aura-c: #4EF2C0; }
.ficha-aura-5 { --aura-a: #D8D8D1; --aura-b: #34D2FF; --aura-c: #4EF2C0; }
.ficha-aura-6 { --aura-a: #4EF2C0; --aura-b: #0E6B52; --aura-c: #D8D8D1; }
.ficha-aura-7 { --aura-a: #0E6B52; --aura-b: #34D2FF; --aura-c: #4EF2C0; }

/* Keyframes de assinatura — iguais aos da proposta. */
@keyframes ir-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ir-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ir-blip { 0%, 100% { opacity: .18; transform: scale(.8); } 50% { opacity: .4; transform: scale(1.15); } }
@keyframes ir-ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes ir-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes ir-alert-pulse { 0%, 100% { opacity: .5; box-shadow: 0 0 0 0 rgba(11,95,143,.35); } 50% { opacity: 1; box-shadow: 0 0 0 6px rgba(11,95,143,0); } }
@keyframes ir-chip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ir-scan-x { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(var(--scan-width, 720px)); opacity: 0; } }
@keyframes ir-wave { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@keyframes ir-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Faixa "AMBIENTE DE TESTE" do preview (worker/preview-banner.mjs) — só para páginas com style-src 'self'
   (área privada, convite, work-invite, continuação do Instagram), que não podem levar 'unsafe-inline'. Mesma
   regra visual usada por PREVIEW_BANNER_INLINE_STYLE nas páginas que aceitam inline (home, /cadastro, /contato). */
.influ-preview-banner { position: sticky; top: 0; z-index: 2147483647; display: block; margin: 0; padding: 8px 16px; background: rgba(121, 89, 26, .10); color: #79591A; border-bottom: 1px solid #79591A; font: 500 11px/1.4 "Geist Mono", ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; text-align: center; }

/* Faixa do modo "ver como" (worker/view-as.mjs, fatia A2) — injetada pelo servidor em toda página do modo de
   leitura, nas mesmas páginas de style-src 'self' da faixa acima. Fica grudada no topo, em alto contraste com o
   token de atenção, e é o PRIMEIRO elemento do corpo: quem navega por teclado ou leitor de tela sabe, antes de
   qualquer conteúdo, que está vendo a conta de outra pessoa e que nada ali pode ser alterado. */
.ir-viewas-banner { position: sticky; top: 0; z-index: 2147483646; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin: 0; padding: 8px 16px; background: var(--amber-soft); color: var(--amber); border-bottom: 2px solid var(--amber); font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center; }
.ir-viewas-banner strong { font-weight: 700; }
.ir-viewas-banner button { min-height: 44px; padding: 6px 14px; border: 1px solid var(--amber); border-radius: var(--radius-md); background: transparent; color: var(--amber); font: inherit; font-weight: 600; cursor: pointer; }
.ir-viewas-banner button:hover { background: var(--amber-soft); }
.ir-viewas-banner button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ir-viewas-banner button[disabled] { opacity: .6; cursor: progress; }
.ir-viewas-banner__live { flex-basis: 100%; font-size: 12px; font-weight: 400; }
/* Cortesia visual: com o marcador no <html>, controles de escrita ficam apagados. A autoridade é o servidor. */
:root[data-view-as="1"] .ir-button--primary, :root[data-view-as="1"] .ir-button--danger { opacity: .55; }