/* ============================================================================
   NAVEGA UBS — design tokens
   Fonte única de verdade para cor, espaço, raio, sombra e movimento.
   Nenhum componente deve escrever hex direto: sempre var(--...).
   Valores conforme design/README.md (handoff hifi).
   ========================================================================== */

:root {
  /* ---- Cores do site (fora do celular) ------------------------------- */
  --papel: #f3f2f2;
  --tinta: #201e1d;
  --tinta-2: #444141;
  --tinta-3: #605d5d;

  /* Ciano — accent primário */
  --ciano: #0088b0;
  --ciano-600: #1186ac;
  --ciano-700: #006786;
  --ciano-800: #004961;
  --ciano-900: #0a303e;

  /* Ciano claro — acentos sobre fundo escuro */
  --ciano-300: #38a6cf;
  --ciano-200: #62c5ee;
  --ciano-100: #99e0ff;
  --ciano-150: #8ddcf5;

  /* Magenta — accent secundário */
  --magenta: #d6006c;
  --magenta-400: #ff458e;
  --magenta-300: #ff90b1;
  --magenta-200: #ffc0d0;
  --magenta-700: #aa0b56;

  /* Amarelo de processo — risco médio, uso raríssimo */
  --amarelo: #edbb00;

  /* Faixa escura (ink) */
  --ink-900: #061a22;
  --ink-850: #061820;
  --ink-800: #08222c;
  --ink-750: #082430;
  --ink-700: #0d3f52;
  --ink-650: #0e4055;
  --ink-body: #071c24;

  /* Texto sobre ink — hierarquia por opacidade */
  --sobre-ink: #eef6f9;
  --sobre-ink-80: rgba(238, 246, 249, .8);
  --sobre-ink-70: rgba(238, 246, 249, .7);
  --sobre-ink-64: rgba(238, 246, 249, .64);
  --sobre-ink-58: rgba(238, 246, 249, .58);
  --sobre-ink-50: rgba(238, 246, 249, .5);
  --sobre-ink-40: rgba(238, 246, 249, .4);

  /* Gradientes das bandas escuras */
  --grad-hero: radial-gradient(120% 85% at 78% 8%, #0d3f52 0%, #08222c 45%, #061820 100%);
  --grad-equipe: radial-gradient(110% 80% at 20% 0%, #0e4055 0%, #082430 48%, #061a22 100%);
  --grad-paciente: radial-gradient(110% 80% at 80% 0%, #0e4055 0%, #082430 48%, #061a22 100%);
  --grad-rodape: linear-gradient(160deg, #082430, #061a22);

  /* ---- Cores do interior do app (tema claro "ice white") -------------- */
  --app-fundo: linear-gradient(180deg, #fbfdfe 0%, #f2f7fa 52%, #e9f0f4 100%);
  --app-tinta: #10243a;
  --app-tinta-80: rgba(16, 36, 58, .8);
  --app-tinta-70: rgba(16, 36, 58, .7);
  --app-tinta-64: rgba(16, 36, 58, .64);
  --app-tinta-55: rgba(16, 36, 58, .55);
  --app-tinta-40: rgba(16, 36, 58, .4);

  --app-acento-texto: #006786;   /* nunca ciano puro sobre claro (contraste) */
  --app-acento: #0088b0;         /* preenchimentos e botão primário */

  /* Superfícies do app */
  --app-sup: rgba(16, 36, 58, .055);
  --app-sup-borda: rgba(16, 36, 58, .14);
  --app-sup-hover: rgba(16, 36, 58, .1);

  /* Cartão em destaque */
  --app-destaque: rgba(0, 136, 176, .075);
  --app-destaque-borda: rgba(0, 136, 176, .34);

  /* Alerta */
  --app-alerta-texto: #aa0b56;
  --app-alerta-ponto: #d6006c;
  --app-alerta-fundo: rgba(214, 0, 108, .07);
  --app-alerta-borda: rgba(214, 0, 108, .28);

  /* Chrome de vidro do app */
  --app-chrome: rgba(250, 253, 254, .86);
  --app-chrome-forte: rgba(250, 253, 254, .9);
  --app-blur: blur(18px) saturate(150%);

  /* ---- Escala de espaço (densidade 1.25×) ---------------------------- */
  --e1: 5px;
  --e2: 10px;
  --e3: 15px;
  --e4: 20px;
  --e5: 30px;
  --e6: 40px;

  /* Seção */
  --secao-pad: clamp(50px, 8vh, 150px) clamp(20px, 5vw, 64px);
  --conteudo-max: 1300px;

  /* ---- Raios ---------------------------------------------------------- */
  --r-vidro: 16px;
  --r-vidro-lg: 22px;
  --r-painel: 20px;
  --r-celular: 56px;
  --r-tela: 44px;
  --r-pilula: 999px;
  --r-linha: 14px;
  --r-barra: 4px;

  /* ---- Sombras -------------------------------------------------------- */
  --s-vidro-escuro: 0 34px 90px rgba(4, 20, 27, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
  --s-vidro-escuro-sm: 0 24px 70px rgba(3, 17, 23, .45), inset 0 1px 0 rgba(255, 255, 255, .32);
  --s-vidro-escuro-lg: 0 44px 110px rgba(3, 17, 23, .62), inset 0 1px 0 rgba(255, 255, 255, .42);
  --s-claro: 0 18px 44px rgba(45, 43, 43, .1);
  --s-app-sm: 0 16px 34px rgba(16, 36, 58, .16);
  --s-app-lg: 0 30px 70px rgba(16, 36, 58, .34);
  --s-fab: 0 14px 34px rgba(214, 0, 108, .45);

  /* ---- Receita do vidro ----------------------------------------------- */
  --vidro-escuro-bg: linear-gradient(150deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .03) 46%, rgba(255, 255, 255, .1));
  --vidro-escuro-borda: 1px solid rgba(255, 255, 255, .22);
  --vidro-escuro-blur: blur(26px) saturate(155%);

  --vidro-claro-bg: rgba(255, 255, 255, .55);
  --vidro-claro-borda: 1px solid rgba(255, 255, 255, .9);
  --vidro-claro-blur: blur(18px) saturate(150%);

  /* ---- Tipografia ----------------------------------------------------- */
  --fonte: "Source Serif 4", Georgia, serif;

  --t-h1: clamp(40px, 6.1vw, 92px);
  --t-h2: clamp(32px, 4.3vw, 62px);
  --t-h3: clamp(24px, 2.4vw, 38px);
  --t-corpo-g: clamp(17px, 1.35vw, 21px);
  --t-numero: clamp(44px, 5vw, 68px);

  /* ---- Curvas de movimento -------------------------------------------- */
  --ease-tela: cubic-bezier(.22, .75, .2, 1);
  --ease-sheet: cubic-bezier(.22, .8, .2, 1);
  --ease-pop: cubic-bezier(.3, 1.4, .5, 1);
}