/* ==========================================================================
   II CONATAN — Design tokens
   Fonte da verdade: Figma "IDOMED" (fileKey jxZOCGlq5U0Cv1caHmSBcQ), página 0:1
   Extraído em 07/10/2026 a partir dos nós reais (não há estilos/variáveis
   locais no arquivo). Valores exatos do Figma; quase-duplicatas foram
   agrupadas no token mais usado (ver docs/design-system.md › "Snap de cores").
   ========================================================================== */

:root {
  /* ---------- Primitivos · Roxo (do mais escuro ao mais claro) ---------- */
  --purple-950: #200645; /* círculo de lote bloqueado */
  --purple-925: #260652; /* acento Fraunces sobre fundo claro */
  --purple-900: #2c075e; /* tinta da marca, fundo escuro (countdown, ao vivo), texto do botão lima */
  --purple-875: #310c63; /* fundo dos cards do Sobre */
  --purple-850: #440f8d; /* título do Sobre; ponto ativo da galeria #430a91 (1:261) */
  --purple-800: #4701a5; /* botões sociais e "voltar ao topo" do rodapé */
  --purple-775: #4e02b4; /* link ativo do header */
  --purple-750: #4f1899; /* forma decorativa dos cards do Sobre */
  --purple-700: #5f16c1; /* primária: texto de chip, botão "Ver no mapa", ícones; ponto ativo #5d16bc (1:181) */
  --purple-680: #600bd4; /* ícone do card de endereço (1:204) */
  --purple-650: #6919d4; /* círculo do lote ativo */
  --purple-600: #7239c0; /* silhueta de borboleta no card roxo */
  --purple-560: #5c378e; /* ícone do selo de check dos itens inclusos (1:776) */
  --purple-550: #775a9f; /* nome do palestrante (carrossel) */
  --purple-525: #924eed; /* borda do card de palestrante ativo/hover (1:98) */
  --purple-500: #923fff; /* tile de ícone dos cards do Sobre */
  --purple-450: #a05aff; /* brilho desfocado do card de preço */
  --purple-400: #a97ce6; /* ":" do countdown */

  /* ---------- Primitivos · Lilás ---------- */
  --lilac-500: #b783fe; /* acento: glows, rótulos de preço, chip */
  --lilac-450: #c193ff; /* itálico do hero "Legado que permanece." */
  --lilac-425: #c59aff; /* borda do botão "Voltar ao topo" (1:468) */
  --lilac-400: #d0aeff; /* card do palestrante, linhas, ícones do hero; anel do selo #d1afff (1:614) */
  --lilac-375: #d6b7ff; /* borda superior da faixa "Realização" (1:407) */
  --lilac-350: #d8bbff; /* card lilás do hero (Elaine) */
  --lilac-325: #d7bef8; /* pontos inativos do carrossel de palestrantes (1:182) */
  --lilac-300: #dfc7ff; /* marca-texto "encontrar" */
  --lilac-250: #e4d0ff; /* círculo do ícone de data no header; tile do Ao vivo #e2ccff (1:346) */
  --lilac-225: #e5d3fd; /* borda do card de endereço (1:203) */
  --lilac-200: #e9d8ff; /* chip "PALESTRANTE" (cards roxo/lilás) */
  --lilac-175: #eadcfd; /* borda do selo do Laboratório no hero (1:610) */
  --lilac-150: #eacfff; /* itálico do countdown, fundo do check */
  --lilac-100: #efe3ff; /* pílula do link ativo, blocos do contador do lote (#efe2ff, 1:827) */
  --lilac-50:  #f9f5ff; /* cards de preço e cartão WhatsApp */
  --lilac-ink: #4f376f; /* texto do chip "PALESTRANTE" nos cards lilás/roxo do hero (1:596, 1:609) */

  /* ---------- Primitivos · Lima (CTA) ---------- */
  --lime-500: #c3fe46;
  --lime-600: #8bd820;
  --lime-200: #e6ffb0; /* silhueta da borboleta no card lima */
  --lime-100: #efffcd; /* chip "PALESTRANTE" no card lima */
  --lime-ink: #2e3d0f; /* texto do chip lima */

  /* ---------- Primitivos · Neutros ---------- */
  --white:      #ffffff;
  --gray-50:    #f8f8f8; /* fundo do rodapé */
  --gray-100:   #f3f3f3; /* card de preço, bloco do nome do palestrante */
  --gray-150:   #efefef; /* fundo da seção Palestrantes */
  --gray-200:   #e4e4e4; /* descrição dos cards do Sobre */
  --gray-300:   #cfcfcf; /* placeholders de imagem */
  --gray-400:   #bdbdbd; /* bordas claras, subtítulos sobre escuro */
  --gray-500:   #9a9a9a; /* divisórias (FAQ, tracejado do preço) */
  --gray-600:   #555555; /* texto auxiliar */
  --gray-700:   #444444; /* texto corrido */
  --gray-900:   #1f1f1f; /* texto forte */
  --ink:        #171d26; /* títulos com Plus Jakarta/IBM Regular (Palestrantes, Presencial) */

  /* ---------- Primitivos · Outros ---------- */
  --speaker-desc: #433852;
  --address-title: #422767;
  --whatsapp: #09c064;

  /* ---------- Semânticos · Superfícies ---------- */
  --bg-page:        var(--white);
  --bg-dark:        var(--purple-900);
  --bg-muted:       var(--gray-150);
  --surface-card:   var(--gray-100);
  --surface-soft:   var(--lilac-50);
  --surface-dark-card: var(--purple-875);

  /* ---------- Semânticos · Texto ---------- */
  --text-strong:    var(--gray-900);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-600);
  --text-on-dark:   var(--white);
  --text-on-dark-muted: var(--gray-400);
  --text-brand:     var(--purple-900);
  --text-accent:    var(--purple-700);
  --text-italic-on-dark: var(--lilac-450);
  --text-italic-on-light: var(--purple-925);

  /* ---------- Semânticos · Bordas ---------- */
  --border-light:   var(--gray-400);
  --border-divider: var(--gray-500);
  --border-lilac:   var(--lilac-400);
  --border-price:   #d3c4e8;

  /* ---------- Gradientes (ângulos convertidos da matriz do Figma) ---------- */
  --grad-cta-lime:      linear-gradient(329deg, var(--lime-500) 22%, var(--white) 121%); /* hero, header, ao vivo, chamada final, submeter */
  --grad-cta-lime-alt:  var(--grad-cta-lime); /* DECISÃO: um único gradiente de CTA (o do hero) */
  --grad-panel:         linear-gradient(90deg, var(--purple-700) 0%, #9241ff 100%);      /* painel "Para quem é?" */
  --grad-live-card:     linear-gradient(90deg, var(--purple-700) 0%, #c19cf3 100%);      /* card "Transmissão ao vivo" */
  --grad-lot-tag:       linear-gradient(90deg, #b782fe 0%, #6c00fe 100%);                /* etiqueta "1º Lote" */
  --grad-address-card:  linear-gradient(335deg, #e2ccff -30%, var(--white) 100%);
  /* faixa do countdown: roxo da marca → violeta, brilho lilás na ponta (contraste com o hero escuro) */
  --grad-countdown: radial-gradient(40% 120% at 100% 50%, color-mix(in srgb, var(--lilac-400) 35%, transparent), transparent 70%),
                    linear-gradient(100deg, var(--purple-700) 0%, var(--violet-glow) 70%, var(--purple-500) 100%);
  --grad-countdown-box: linear-gradient(159deg, #dbadff 22%, #f0ddff 97%);
  --grad-lot-track:     linear-gradient(90deg, rgba(206,171,255,0) 0%, #ceabff 68%);
  --grad-seal:          linear-gradient(153deg, #f7f7f7 17%, #dec5ff 127%);

  /* ---------- Tipografia · Famílias ---------- */
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* principal */
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;                       /* acentos itálicos */
  /* DECISÃO (07/10): só IBM Plex Sans + Fraunces. Inter e Plus Jakarta do Figma viram IBM. */
  --font-button:  var(--font-sans);
  --font-alt:     var(--font-sans);
  --fraunces-axes: "WONK" 1, "SOFT" 0;                                                 /* igual ao Figma */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Tipografia · Escala (desktop) ---------- */
  --fs-hero: 46px;       --lh-hero: 1.08;
  --fs-h2: 44px;         --lh-h2: 1.1;         /* DECISÃO: título único de seção (.t-h2) */
  --fs-countdown-title: 35px;
  --fs-chip: 12px;       --lh-chip: 1;         /* chips/eyebrows: discretos (revisão 08/10/2026; o Figma usava 18) */
  --ls-chip: 0.1em;
  --fs-h3: 28px;         --lh-h3: 1.2;
  --fs-card-title: 22px; --lh-card-title: 1.25;
  --fs-body-xl: 20px;    --lh-body-xl: 1.5;
  --fs-body-l: 18px;     --lh-body-l: 1.55;
  --fs-address: 27px;    /* nome do local 1:208 (Plus Jakarta 700 → IBM 600) */
  --fs-body: 16px;       --lh-body: 1.55;
  --fs-nav: 15px;        --lh-nav: 23px;      /* links do header (1:522) */
  --fs-body-s: 14px;     --lh-body-s: 1.5;
  --fs-small: 13px;
  --fs-caption: 12px;
  --fs-micro: 9px;       /* rótulos do contador do lote */
  --ls-label: 0.14em;    /* 14% no Figma */
  --ls-price: -0.03em;   /* número do preço */

  /* ---------- Tipografia · Escala (mobile, só o hero está desenhado) ---------- */
  --fs-hero-m: 27px;
  --fs-body-xl-m: 16px;
  --fs-meta-m: 14px;
  --fs-btn-m: 14px;
  --fs-price-m: 64px;    /* preço no mobile (proposta) */
  --fs-lot-tag-m: 44px;  /* etiqueta "1º Lote" no mobile (proposta) */
  --fs-band-lead-m: 20px; /* countdown mobile: "Marque na sua agenda" menor que a chamada (wireframe) */     /* proposta aprovada pelo Lucas */

  /* ---------- Espaçamento (gaps e paddings usados no Figma) ---------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-130: 130px;

  /* ---------- Layout ---------- */
  --container: 1180px;        /* largura padrão de conteúdo */
  --container-wide: 1496px;   /* carrossel de palestrantes */
  --container-cd: 1236px;     /* faixa do countdown */
  --cd-text-w: 423px;        /* 1:848: coluna de texto do countdown */
  --sobre-pad-top: 84px;     /* countdown (fim y 1120) → Sobre 1:616 (y 1204) */
  --sobre-desc-w: 920px;     /* 1:620 */
  --publico-gap: 55px;       /* cards do Sobre (fim y 1896) → painel 1:702 (y 1951) */
  --publico-overlap: 76px;   /* painel termina 76px dentro do Submeter (y 2087) */
  --publico-overlap-m: 40px; /* mobile (proposta aprovada) */
  /* painel "Para quem é?" com profundidade (revisão 08/10/2026) */
  /* roxo à esquerda → lilás bem claro na ponta direita, inclinado; roxo/violeta seguram até ~55% (título branco) */
  --grad-publico: linear-gradient(115deg, var(--purple-700) 0%, var(--violet-glow) 55%, var(--lilac-300) 78%, var(--lilac-100) 100%);
  --grad-publico-m: linear-gradient(155deg, var(--purple-700) 0%, var(--violet-glow) 42%, var(--lilac-300) 72%, var(--lilac-100) 100%);
  --glow-publico: radial-gradient(55% 90% at 100% 0%, color-mix(in srgb, var(--violet-glow) 55%, transparent), transparent 70%),
                  radial-gradient(45% 80% at 0% 100%, color-mix(in srgb, var(--lilac-400) 22%, transparent), transparent 70%);
  --publico-card-glass: linear-gradient(180deg, color-mix(in srgb, var(--white) 72%, transparent), color-mix(in srgb, var(--white) 55%, transparent));
  --publico-card-border: linear-gradient(180deg, var(--white), color-mix(in srgb, var(--white) 40%, transparent));
  /* Submeter "Trabalhos D" (IDOMED 30:527 / 30:581) */
  --sub-pad: 96px;              /* padding vertical do frame */
  --sub-deadline-w: 400px;      /* cartão de prazo 30:533 */
  --fs-deadline: 56px;  --fs-deadline-m: 40px;
  --fs-step-title: 19px; --fs-step-title-m: 17px;
  --step-bg: color-mix(in srgb, var(--white) 4%, transparent);
  --step-border: color-mix(in srgb, var(--lilac-400) 25%, transparent);
  --step-bg-current: color-mix(in srgb, var(--lilac-400) 12%, transparent);
  --step-line: color-mix(in srgb, var(--lilac-400) 30%, transparent);
  /* cards das etapas: vidro + borda em degradê + luz no card atual (revisão 08/10/2026) */
  --step-glass: linear-gradient(180deg, color-mix(in srgb, var(--white) 7%, transparent), color-mix(in srgb, var(--white) 2%, transparent));
  --step-border-grad: linear-gradient(180deg, color-mix(in srgb, var(--lilac-400) 45%, transparent), color-mix(in srgb, var(--lilac-400) 8%, transparent));
  --step-current-glow: radial-gradient(85% 70% at 100% 0%, color-mix(in srgb, var(--lilac-400) 28%, transparent), transparent 72%);
  /* Premiação (IDOMED 47:1426 · card 47:1355) */
  --bg-premiacao: radial-gradient(60% 70% at 50% 0%, var(--lilac-100), transparent 70%), var(--white);
  --grad-premio-escuro: linear-gradient(150deg, var(--purple-950) 0%, var(--purple-900) 45%, var(--purple-800) 100%);
  --glow-premio-escuro: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--violet-glow) 38%, transparent), transparent 70%);
  --radius-premio: 28px;        /* 47:1356 */
  --premio-pad: 36px;           /* 47:1356 */
  --premio-pad-m: 24px;
  --premio-tile: 72px;          /* 47:1358 (raio 20) */
  --premio-foto: 64px;          /* 47:1366 */
  --fs-premio-nome: 30px;       /* 47:1364 */
  --fs-premio-nome-m: 24px;
  --fs-premio-pessoa: 19px;     /* 47:1370 */
  --prize-glow: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--lilac-400) 24%, transparent), transparent 70%);
  --notice-bar: linear-gradient(180deg, var(--lilac-400), color-mix(in srgb, var(--lilac-400) 15%, transparent));
  --step-border-current: linear-gradient(225deg, var(--lilac-300) 0%, color-mix(in srgb, var(--lilac-400) 55%, transparent) 45%, color-mix(in srgb, var(--lilac-400) 12%, transparent) 100%);
  --step-shadow-hover: 0 18px 36px rgba(10, 2, 24, .35);
  --notice-bg: color-mix(in srgb, var(--white) 6%, transparent);
  /* fundo: só os dois brilhos lilás (decisão do Lucas em 08/10/2026) */
  --sub-glow: radial-gradient(55% 60% at 88% 8%, color-mix(in srgb, var(--purple-500) 45%, transparent), transparent 70%),
              radial-gradient(45% 55% at 0% 100%, color-mix(in srgb, var(--lilac-500) 28%, transparent), transparent 70%);
  --palestrantes-pad: 100px;    /* 1:59: seção 908, conteúdo 707 centralizado */
  --speaker-card-w: 268px;      /* 1:89 */
  --speaker-card-h: 380px;
  --speaker-photo-w: 107px;     /* 1:91 */
  --speaker-photo-h: 112px;
  --modal-w: 834px;             /* wireframe 18:97 (PROPOSTA) */
  --inscricoes-pad: 78px;       /* 1:728: conteúdo de 810 centralizado em 966 (medido no print) */
  --lots-w: 760px;              /* stepper 1:732 */
  --price-card-w: 1000px;       /* 1:761 */
  --price-left-w: 324px;        /* 1:763 */
  --price-box-w: 236px;         /* 1:801 */
  --fs-price: 72px;             /* 1:805 */
  --fs-price-cur: 20px;
  --fs-price-cents: 28px;
  --fs-lot-tag: 56px;           /* 1:765 */
  --policy-w: 560px;            /* modal da política (PROPOSTA) */
  --presencial-pad-top: 79px;   /* Inscrições (fim y 4756) → Presencial; 79 + 89 = 168 até o Ao vivo (y 6041) */
  --aovivo-gap: 89px;
  --presencial-intro-w: 779px;  /* 1:186 */
  --local-photo-w: 725px;       /* 1:196 */
  --local-card-w: 423px;        /* 1:203 */
  --local-row-h: 408px;
  --gallery-slide-w: 300px;     /* 1:224 */
  --gallery-slide-h: 225px;
  --aovivo-pad: 80px;           /* 1:265: player 543 + 80 em cima e embaixo = 703 */
  --aovivo-player-w: 708px;     /* 1:267 */
  --aovivo-text-w: 527px;       /* 1:340 */
  --gap-123: 123px;            /* respiro Figma entre Ao vivo→FAQ, Realização→CTA final e CTA→rodapé */
  --gap-144: 144px;            /* FAQ → Realização */
  --faq-head-w: 378px;         /* 1:359 */
  --faq-list-w: 744px;         /* 1:364 */
  --logo-w: 168px;             /* 1:411 */
  --logo-h: 80px;
  /* logos reais (48:1580): alturas ajustadas para o mesmo peso visual (proporções muito diferentes) */
  --logo-card-h: 112px;          /* faixa de cada logo (sem card) */
  --logo-h-idomed: 76px;        /* 257 × 124 */
  --logo-h-tanatologia: 96px;   /* 175 × 149 */
  --logo-h-excellence: 46px;    /* 328 × 71 */
  --final-h: 476px;            /* 1:507 */
  --final-w: 760px;            /* 1:508 */
  /* Teaser da Programação A4 (wireframes 50:45 / 50:121) */
  --teaser-pad: 80px;
  --teaser-text-w: 460px;
  --teaser-gap: 72px;
  /* fundo lilás claro com gradiente (revisão 08/10/2026: o Ao vivo, escuro, prevalece) */
  --grad-teaser: radial-gradient(60% 70% at 100% 0%, color-mix(in srgb, var(--lilac-300) 70%, transparent), transparent 70%),
                 radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--lilac-250) 60%, transparent), transparent 70%),
                 linear-gradient(160deg, var(--lilac-100) 0%, var(--lilac-50) 60%, var(--white) 100%);
  --stat-bg: var(--white);             /* boxes dos números sobre o lilás */
  --stat-bg-hover: var(--white);
  --stat-border: color-mix(in srgb, var(--lilac-400) 70%, transparent);
  --stat-shadow: 0 6px 18px color-mix(in srgb, var(--purple-900) 6%, transparent);
  --stat-shadow-hover: 0 18px 36px color-mix(in srgb, var(--purple-700) 18%, transparent);
  --line-on-light: color-mix(in srgb, var(--lilac-500) 35%, transparent); /* divisórias da lista */
  --fs-stat: 64px;  --fs-stat-m: 48px; --fs-stat-s: 40px;
  --fs-dia: 40px;   --fs-dia-m: 28px;
  --fs-week: 11px;  /* "QUI · ABR" */
  --gutter: 24px;             /* margem lateral mínima (mobile: 23px no hero → 24) */
  --section-space: 120px;     /* respiro entre seções claras (Figma varia 80–144) */
  --hero-pad-top: 195px;     /* 1:516: o conteúdo começa a 195px do topo do hero (export) */
  --hero-pad-bottom: 74px;
  --hero-text-w: 642px;      /* 1:548 */
  --hero-media-w: 474px;     /* 1:578 */
  --hero-cards-w: 445px;     /* 1:579 (composição 445 × 596) */
  --hero-cards-w-m: 316px;   /* 1:918 (mesma composição × 0,71) */
  --header-h: 69px;
  --header-w: 1206px;
  --header-top: 24px;         /* header fixo flutuante (no Figma está no fluxo do hero) */
  --header-top-compact: 12px; /* ao rolar */
  --header-h-compact: 65px;   /* ao rolar: padding 12 → 10 */
  --header-h-m: 62px;         /* PROPOSTA aprovada (wireframe 42:136): barra 44 + padding 8 + borda */
  --header-top-m: 12px;

  /* ---------- Botões (escala única; revisão 07/10/2026) ---------- */
  --btn-h-sm: 40px;   --btn-px-sm: 18px;  --btn-arrow-sm: 24px;
  --btn-h-md: 52px;   --btn-px-md: 24px;  --btn-arrow-md: 30px;
  --btn-h-lg: 58px;   --btn-px-lg: 28px;  --btn-arrow-lg: 34px;
  --btn-h-sm-m: 44px; /* alvo de toque mínimo */
  --fs-btn-md: 14px;
  --fs-btn-lg: 15px;

  /* ---------- Página de Programação (IDOMED 34:895 / 34:976) ---------- */
  --ih-h: 72px;                 /* header institucional (barra roxa) */
  --ih-h-compact: 60px;         /* ao rolar */
  --prog-side-w: 340px;         /* coluna dos dias */
  --prog-time-w: 64px;          /* coluna dos horários */
  /* dia ativo: roxo da marca → roxo primário, com brilhos lilás (Etapa 11, pedido do Lucas) */
  --grad-day-active: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-850) 62%, var(--purple-700) 100%);
  --violet-glow: #9241ff;       /* brilho do dia ativo (pedido do Lucas, 08/10/2026) */
  --glow-day-active: radial-gradient(60% 75% at 100% 0%, color-mix(in srgb, var(--violet-glow) 32%, transparent), transparent 72%),
                     radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--purple-500) 35%, transparent), transparent 70%);
  /* card de palestrante em destaque (palestras magnas, carrossel) */
  --grad-speaker-destaque: linear-gradient(150deg, var(--purple-900) 0%, var(--purple-850) 55%, var(--purple-700) 100%);
  --grad-speaker-photo: linear-gradient(135deg, var(--lilac-450) 0%, var(--purple-700) 55%, var(--purple-700) 100%); /* #5F16C1 (pedido do Lucas) */
  --glow-speaker-destaque: radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--violet-glow) 45%, transparent), transparent 70%),
                           radial-gradient(60% 40% at 0% 100%, color-mix(in srgb, var(--lime-500) 14%, transparent), transparent 70%);
  /* cores amostradas da ilustração do Ao vivo (1:267), para as camadas animadas por cima dela */
  --mock-card: #1d1d1d;         /* card de mensagem do chat */
  --mock-line: #4b4b4b;         /* linhas (skeleton) dentro do card */
  --mock-video: #333333;        /* janela de vídeo: um tom acima do card do palco (#292929) */
  /* rodapé (revisão 09/10/2026): roxo da marca com brilho lilás no canto */
  --glow-footer: radial-gradient(50% 80% at 100% 0%, color-mix(in srgb, var(--violet-glow) 30%, transparent), transparent 70%),
                 radial-gradient(40% 70% at 0% 100%, color-mix(in srgb, var(--lilac-400) 10%, transparent), transparent 70%);
  /* box do dia (Programação) */
  --grad-dayhead: linear-gradient(120deg, var(--lilac-50) 0%, var(--white) 55%, var(--lilac-100) 100%);
  --glow-dayhead: radial-gradient(45% 90% at 100% 100%, color-mix(in srgb, var(--violet-glow) 16%, transparent), transparent 70%);
  --card-border: color-mix(in srgb, var(--lilac-400) 55%, transparent);
  --card-shadow-hover: 0 12px 28px color-mix(in srgb, var(--purple-900) 10%, transparent);
  /* tags de modalidade (discretas, dentro da paleta) */
  --tag-mesa-bg: var(--lilac-100);            --tag-mesa-ink: var(--purple-700);
  --tag-palestra-bg: var(--lilac-300);        --tag-palestra-ink: var(--purple-900);
  --tag-oficina-bg: var(--lime-100);          --tag-oficina-ink: var(--lime-ink);
  --tag-cine-bg: color-mix(in srgb, var(--purple-500) 14%, var(--white)); --tag-cine-ink: var(--purple-850);
  --tag-trabalhos-bg: var(--lilac-50);        --tag-trabalhos-ink: var(--purple-850);
  --tag-neutro-bg: var(--gray-100);           --tag-neutro-ink: var(--gray-600);

  /* ---------- Raios ---------- */
  --radius-xs: 4px;
  --radius-check: 8px;
  --radius-sm: 12px;
  --radius-photo: 14px;
  --radius-tile: 16px;
  --radius-card: 20px;
  --radius-lg: 24px;
  --radius-price: 28px;
  --radius-final: 46px;
  --radius-pill: 999px;

  /* ---------- Sombras e efeitos ---------- */
  --shadow-header: 0 8px 24px rgba(0, 0, 0, .12);
  --header-glass-alpha: 78%;   /* branco do header ao rolar (vidro) */
  --header-glass-blur: 14px;
  --shadow-header-scrolled: 0 12px 32px rgba(44, 7, 94, .16); /* PROPOSTA: header ao rolar (não existe no Figma) */
  --shadow-panel:  0 16px 40px rgba(0, 0, 0, .18);
  --shadow-avatar: -6px 1px 7.5px rgba(0, 0, 0, .17);
  --shadow-section-live: 16px 4px 20px -4px rgba(65, 65, 65, .15);
  --glow-icon-tile: inset 0 4px 35px #b783fe, 0 4px 30.5px rgba(183, 131, 254, .5);
  --glow-lot-active: inset 0 4px 11.8px #b783fe, 0 0 19.9px rgba(183, 131, 254, .65);
  --glow-pin: inset 0 0 30.2px #b783fe, 0 0 62.6px #b783fe;
  --blur-price-glow: 250px;
  --blur-seal: 12px;

  /* ---------- Títulos (DECISÃO: padrão único) ---------- */
  --title-on-light: var(--purple-900);
  --title-on-dark:  var(--white);

  /* ---------- Movimento (CSS; no GSAP usar "expo.out"/"power3.out") ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;

  /* ---------- Camadas ---------- */
  --z-butterfly: 3;
  --z-header: 100;
  --z-modal: 200;
}