/* Tokens do design system do Retrato (fluxo v2), copiados de design_handoff_retrato_fluxo_v2/
   sansa-design-system/tokens em 02/10/2026. Mudancas: :root virou .rt2, porque as telas antigas
   do Retrato ja usam --ink, --accent e --bg com outros valores. Toda tela migrada pro fluxo v2
   ganha a classe rt2 na raiz. As fontes (DM Serif Display, Inter) ja sao carregadas pela pagina. E a regra de foco perdeu o border-radius: inherit (ver la). */

/* ── colors ── */
.rt2 {
  /* ── Base · fundo escuro (telas do Retrato) ── */
  --bg-deep: #14201b;
  --bg-deep-2: #26332c;
  --bg-gradient: radial-gradient(85% 65% at 50% 42%, var(--bg-deep-2) 0%, var(--bg-deep) 74%);
  --bg-gradient-mobile: radial-gradient(120% 55% at 50% 30%, var(--bg-deep-2) 0%, var(--bg-deep) 74%);

  /* ── Base · fundo claro (canvas, docs) ── */
  --bg-paper: #ece3d3;
  --bg-paper-2: #fffdf8;

  /* ── Marfim (tinta principal) ── */
  --ivory: #f2ede1;
  --ivory-rgb: 242, 237, 225;
  --ink: var(--ivory);
  --ink-2: rgba(var(--ivory-rgb), .72);   /* legenda, dose, texto de apoio — AA sobre bg-deep */
  --ink-3: rgba(var(--ivory-rgb), .50);   /* eyebrow, decorativo */
  --ink-4: rgba(var(--ivory-rgb), .28);   /* dots inativos */
  --line: rgba(var(--ivory-rgb), .14);
  --line-strong: rgba(var(--ivory-rgb), .28);
  --surface: rgba(var(--ivory-rgb), .04);
  --surface-hover: rgba(var(--ivory-rgb), .07);

  /* ── Pêssego (acento único) ── */
  --accent: #d9925e;
  --accent-rgb: 217, 146, 94;
  --accent-soft: rgba(var(--accent-rgb), .08);
  --accent-line: rgba(var(--accent-rgb), .45);
  --accent-text-on-soft: #e8ae85;

  /* ── Grafite (tinta sobre fundo claro) ── */
  --graphite: #1d2823;
  --graphite-2: #5f6d67;
  --graphite-3: #93a09a;

  /* ── Semântica clínica (biomarcadores) ── */
  --status-optimal: #8fc9a2;
  --status-mid: #e3b86a;
  --status-attention: #e0876c;
  --status-attention-line: rgba(224,135,108,.4);
  --status-attention-soft: rgba(224,135,108,.09);
  --status-mid-line: rgba(217,162,94,.3);
  --status-mid-soft: rgba(217,162,94,.06);

  /* ── Tons adicionais em uso no Retrato Fluxo v2 (30/09/2026) ── */
  --bg-raised: #1b2721;             /* selo sobre card (07) */
  --accent-strong: #b8743f;         /* link hover */
  --accent-a55: rgba(var(--accent-rgb), .55);
  --accent-a70: rgba(var(--accent-rgb), .70);
  --ivory-a03: rgba(var(--ivory-rgb), .03);
  --ivory-a06: rgba(var(--ivory-rgb), .06);
  --ivory-a08: rgba(var(--ivory-rgb), .08);
  --ivory-a12: rgba(var(--ivory-rgb), .12);
  --ivory-a20: rgba(var(--ivory-rgb), .20);
  --ivory-a22: rgba(var(--ivory-rgb), .22);
  --ivory-a35: rgba(var(--ivory-rgb), .35);
  --ivory-a82: rgba(var(--ivory-rgb), .82);
  --graphite-a30: rgba(29,40,35,.30);
  --status-optimal-line: rgba(143,201,162,.45);
  --status-optimal-soft: rgba(143,201,162,.08);
  --status-mid-strong-line: rgba(227,184,106,.45);
  --status-mid-strong-soft: rgba(227,184,106,.08);
  --status-attention-strong-line: rgba(224,135,108,.5);
  --status-attention-strong-soft: rgba(224,135,108,.1);

  /* ── Legado (em uso hoje; migrar para --ink-*) ── */
  --legacy-muted: #93a09a;   /* 4.4:1 — substituir por --ink-2 em texto lido */
  --legacy-dim: #6f7c76;     /* 3.7:1 — só decorativo */
  --legacy-dim-2: #7d8a84;
  --legacy-ivory-alt: #f7f3ea; /* segundo off-white — unificar em --ivory */
}

/* ── typography ── */
.rt2 {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Escala normalizada (8 passos). Valores legados entre parênteses no readme. */
  --text-2xs: 11px;   /* eyebrow, badge, nav — mínimo absoluto */
  --text-xs: 12px;    /* legenda, dose, meta */
  --text-xs-2: 13px;  /* corpo de card, lista */
  --text-sm: 14px;    /* corpo compacto */
  --text-sm-2: 15px;  /* número em controle, corpo mobile */
  --text-md: 16px;    /* corpo */
  --text-lg: 20px;    /* nome de item, destaque em card */
  --text-xl: 27px;    /* h1 mobile */
  --text-2xl: 44px;   /* h1 desktop, nome da substância */
  --text-3xl: 64px;   /* número-herói (3-2-1, IMC) */

  /* Escala display (serifa) — valores do Retrato Fluxo v2 */
  --display-xs: 19px;
  --display-sm: 22px;
  --display-md: 24px;
  --display-lg: 26px;
  --display-xl: 28px;
  --display-2xl: 32px;
  --display-3xl: 36px;
  --display-hero-mid: 52px;

  --leading-tight: 1;
  --leading-heading: 1.1;
  --leading-body: 1.55;

  --tracking-eyebrow: .2em;
  --tracking-label: .14em;
  --tracking-heading: -.01em;

  /* Composições */
  --type-eyebrow: 600 var(--text-2xs)/1 var(--font-body);
  --type-label: 600 var(--text-xs)/1.3 var(--font-body);
  --type-body: 400 var(--text-md)/var(--leading-body) var(--font-body);
  --type-body-sm: 400 var(--text-sm)/var(--leading-body) var(--font-body);
  --type-caption: 400 var(--text-2xs)/1.4 var(--font-body);   /* linha de confiança sob CTA */
  --type-h1-mobile: 400 var(--text-xl)/var(--leading-heading) var(--font-display);
  --type-h1-desktop: 400 var(--text-2xl)/var(--leading-heading) var(--font-display);
  --type-highlight: italic 400 22px/1.2 var(--font-display);
  --type-hero-number: 400 var(--text-3xl)/1 var(--font-display);
}

/* ── spacing ── */
.rt2 {
  /* Grade de 4 */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;

  /* Frames */
  --frame-desktop-w: 960px;
  --frame-desktop-h: 640px;
  --frame-desktop-pad-x: 72px;
  --frame-desktop-pad-top: 96px;   /* topo do h1 */
  --frame-mobile-w: 390px;
  --frame-mobile-h: 844px;
  --frame-mobile-pad: 22px;
  --frame-mobile-h1-top: 80px;

  /* Rodapé fixo (mobile) */
  --footer-dots-bottom: 20px;
  --footer-action-bottom: 60px;

  /* Raios — 3 valores */
  --radius-sm: 8px;    /* chips, badges quadrados */
  --radius-md: 12px;   /* cards, inputs, frame desktop */
  --radius-pill: 999px;
  --radius-device: 34px;

  /* Traços */
  --stroke-hairline: 1px;
  --stroke-icon: 1.4;

  /* Alvos de toque */
  --tap-min: 44px;
  --control-h: 44px;
  --control-h-mobile: 48px;

  /* Ícones e orbs */
  --icon-sm: 20px;
  --icon-md: 24px;
  --orb-sm: 40px;
  --orb-md: 64px;
  --orb-lg: 120px;
  --orb-xl: 156px;
}

/* ── motion ── */
.rt2 {
  --ease-out: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-slow: 700ms;
  --dur-reveal: 1100ms;

  /* Assinatura: revelar por resolução (blur → nítido), nunca slide/bounce */
  --reveal-blur-from: blur(14px);
  --reveal-shift: translateY(8px);
  --stagger: 90ms;
}
@keyframes ds-reveal { from { opacity:0; filter:var(--reveal-blur-from); transform:var(--reveal-shift); } to { opacity:1; filter:blur(0); transform:none; } }
@keyframes ds-fade-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── layout ── */
/* Layout tokens — medidas extraídas das 3 telas de referência (ui_kits/retrato). */
.rt2 {
  /* Cabeçalho
     HEADER PADRÃO (24/10/2026, dono): o logo fica no MESMO ponto em todas as telas do Retrato
     (quiz, carrossel, carrinho, declaração, pagamento/PIX/confirmação).
       Celular: topo = --frame-mobile-pad · esquerda = --frame-mobile-pad · altura = --logo-h-mobile
       Desktop: topo = --header-top · altura = --logo-h-desktop · esquerda = borda da moldura +
                --frame-desktop-pad-x, ou seja
                max(var(--frame-desktop-pad-x), calc(50% - var(--frame-desktop-w) / 2 + var(--frame-desktop-pad-x)))
                (direita espelhada, para eyebrow, "← Voltar" ou etapas).
     A linha do header tem a altura do logo; o que vai à direita centraliza nela e nunca
     empurra o logo (um botão mais alto que o logo deslocava o logo 3px no carrinho).
     Página com zoom no html (quiz, fitScreen): dividir cada token pelo fator --z.
     Conferido em 1382×860 (x250 y32 h23) e 375×812 (x21 y21 h18). */
  --header-top: 30px;
  --logo-h-desktop: 23px;
  --logo-h-mobile: 18px;
  --frame-desktop-pad-bottom: 34px;
  --shadow-device: 0 24px 50px rgba(60,48,32,.22);

  /* Títulos */
  --h1-split: 30px;          /* aha e carrinho (duas colunas) */
  --h1-list: 32px;           /* biomarcadores */
  --h1-decision: 34px;       /* 07 Biografia */
  --h1-mobile-compact: 22px; /* 01 Exames mobile */
  --h1-chapter: 40px;        /* capítulo centralizado */
  --h1-mobile: 26px;         /* todas as telas mobile */
  --h1-leading: 1.12;
  --h1-chapter-max: 680px;
  --chapter-h1-offset: 14px; /* respiro extra do h1 do capítulo */
  --substance-name: 44px;
  --substance-name-mobile: 30px;

  /* Números-herói (3-2-1) */
  --hero-num-desktop: 84px;
  --hero-num-mobile: 64px;
  --stat-row-w: 800px;

  /* Layout · duas colunas */
  --split-gap: 72px;
  --split-list-w: 340px;
  --split-aside-w: 300px;
  --stack-gap: 18px;
  --form-row-gap: 12px;
  --form-row-pb: 22px;
  --field-phone-w: 220px;

  /* Layout · capítulo */
  --chapter-reserve-bottom: 96px;
  --highlight-grid-w: 860px;
  --highlight-grid-gap: 14px;

  /* Rodapé · desktop */
  --action-bottom-desktop: 58px;
  --nav-bottom-desktop: 30px;
  --nav-gap-desktop: 22px;

  /* Mobile */
  --m-h1-top: 40px;
  --m-reserve-bottom: 124px;
  --m-stack-gap: 16px;
  --m-nav-row-bottom: 12px;      /* linha de dots + setas */
  --m-action-bottom: 70px;       /* TextButton acima da linha de setas */
  --nav-arrow-inset-desktop: 32px;

  /* Componentes · paddings recorrentes */
  --textbutton-pad: 13px 16px;
  --card-pad: 22px 20px;
  --chip-pad: 6px 10px;
  --dots-gap: 7px;
}

/* ── focus ── */
/* Foco visível em teclado e mouse (decisão 30/09/2026). */
.rt2 { --focus-ring: 2px solid var(--accent); --focus-offset: 3px; }
.rt2 :where(button, a, input, select, textarea, [role="radio"], [role="button"], [tabindex]):focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  /* "border-radius: inherit" do handoff foi tirado em 02/10: ao focar, o elemento herdava o raio
     do pai (zero) e o cartão ou botão selecionado ficava com os cantos quadrados. */
}

/* ── padrão fluido (dono, 23/10/2026) ──
   Os tokens de layout deixam de ser pixel fixo: cada um vale o número da referência na tela de
   referência (desktop 1280×800, celular 390×844) e escala com a tela, entre um piso e um teto.
   Corpo de texto, destaque, raios e fios ficam fixos por legibilidade. Se ainda assim não couber,
   a tela inteira escala por igual (nunca apertar partes). */
.rt2 {
  /* eyebrow = rótulo do cabeçalho: mesmo token nos dois lugares */
  --eyebrow-size: clamp(10px, .86vw, 13px);
  --type-eyebrow: 600 var(--eyebrow-size)/1 var(--font-body);
  /* legenda sob o título: tamanho de corpo, escalando */
  --legend-size: clamp(15px, 1.25vw, 19px);
  --type-legend: 400 var(--legend-size)/var(--leading-body) var(--font-body);

  /* celular (ref. 390×844) */
  --frame-mobile-pad: clamp(16px, 5.6vw, 28px);
  --h1-mobile: clamp(24px, 6.7vw, 30px);
  --m-h1-top: clamp(24px, 4.7vh, 48px);
  --m-stack-gap: clamp(12px, 1.9vh, 20px);
}
@media (min-width: 900px) {
  .rt2 {
    /* moldura e margens (ref. 960×640 em 1280×800) */
    --frame-desktop-w: clamp(860px, 75vw, 1440px);
    --frame-desktop-h: clamp(560px, 80vh, 900px);
    --frame-desktop-pad-x: clamp(32px, 5.6vw, 96px);
    --frame-desktop-pad-top: clamp(56px, 12vh, 128px);
    --frame-desktop-pad-bottom: clamp(20px, 4.25vh, 48px);
    --header-top: clamp(16px, 3.75vh, 40px);
    /* títulos */
    --h1-chapter: clamp(30px, 3.1vw, 52px);
    --h1-split: clamp(24px, 2.35vw, 40px);
    --h1-list: clamp(26px, 2.5vw, 42px);
    --h1-decision: clamp(28px, 2.65vw, 44px);
    /* duas colunas e grades */
    --split-gap: clamp(24px, 5.6vw, 96px);
    --split-aside-w: clamp(260px, 23.4vw, 380px);
    --highlight-grid-w: clamp(720px, 67vw, 1240px);
    --stat-row-w: clamp(680px, 62.5vw, 1160px);
    /* ritmo vertical: espaços de bloco acompanham a altura */
    --space-5: clamp(16px, 3vh, 32px);
    --space-6: clamp(20px, 4vh, 44px);
    --space-7: clamp(24px, 5vh, 56px);
    /* rodapé */
    --chapter-reserve-bottom: clamp(72px, 12vh, 128px);
    --action-bottom-desktop: clamp(40px, 7.25vh, 72px);
    --nav-bottom-desktop: clamp(16px, 3.75vh, 40px);
    --nav-arrow-inset-desktop: clamp(20px, 2.5vw, 48px);
  }
}

/* PADRÃO DE PROPORÇÃO DO DESKTOP (dono, 23/10/2026), referência: quiz do Retrato.
   1. Eyebrow mora no cabeçalho, centralizado na horizontal e na vertical dele (alinhado ao logo e ao contador).
   2. H1 + legenda ficam no meio entre o cabeçalho e o conteúdo (margin-top:auto no h1).
   3. Conteúdo (botões) fica no meio do espaço restante (margin-block:auto), centralizado na horizontal.
   Resultado: espaços iguais cabeçalho→h1, legenda→conteúdo e conteúdo→ação.
   4. ESCALA (23/10, tarde): no quiz os tamanhos são px da tela de referência (celular 390×844,
      desktop 1280×800) e UM fator por tela (zoom no html, em fitScreen) escala tudo junto:
      desktop = min(largura/1280, altura/800) entre 0,7 e 1,6, com 2ª passada se a pergunta não
      couber na altura; celular = largura/390 entre 1 e 1,2, rolando como sempre. Os clamps de
      vw/vh por elemento foram abandonados ali: cada parte crescia num ritmo e a tela perdia a
      proporção. Os tokens .rt2 acima (aha e carrossel) ainda usam clamp; migrar quando essas
      telas forem revistas. */