/* Tokens da Vertyh, do YAML de references/DESIGN.md. Se os dois divergirem, vale o DESIGN.md:
   atualize este arquivo junto. Valores de marca, não de tema: cada projeto mapeia seus papéis
   (fundo, texto, ação…) para estes nomes. */

@font-face {
  font-family: "Host Grotesk";
  src: url("../fonts/HostGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
}
/* Satoshi só tem pesos estáticos: 300, 400, 500, 700 e 900. Não existe 600. */
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }

:root {
  /* Paleta */
  --vertyh-navy: #1a365b;
  --vertyh-navy-deep: #08142b; /* sombra do Fosco Escuro */
  --vertyh-blue: #306aa3;
  --vertyh-blue-soft: #bed3f0;
  --vertyh-pulse: #c7de57;
  --vertyh-grafite: #6c6c6c;
  --vertyh-off-white: #e9e9eb;
  --vertyh-white: #ffffff;

  /* Proporção padrão por tela: ~70% base clara, ~20% azuis (luz e texto), ~10% pulso Lime.
     Navy de fundo em no máximo 1 de cada 5 telas. Referência de composição, não propriedade CSS. */
  --vertyh-proportion-base: 70%;
  --vertyh-proportion-blues: 20%;
  --vertyh-proportion-pulse: 10%;

  /* Escalas */
  --vertyh-blue-050: #f7fafd;
  --vertyh-blue-100: #dae6f7;
  --vertyh-blue-200: #bed3f0;
  --vertyh-blue-300: #9ab8dd;
  --vertyh-blue-400: #779eca;
  --vertyh-blue-500: #5484b6;
  --vertyh-blue-600: #306aa3;
  --vertyh-blue-700: #29588a;
  --vertyh-blue-800: #214772;
  --vertyh-blue-900: #1a365b;
  --vertyh-blue-950: #0d1d31;
  --vertyh-lime-050: #fafceb;
  --vertyh-lime-100: #eff6d1;
  --vertyh-lime-200: #e5f1b6;
  --vertyh-lime-300: #dbeb99;
  --vertyh-lime-400: #d1e47b;
  --vertyh-lime-500: #c7de57;
  --vertyh-lime-600: #a2b645;
  --vertyh-lime-700: #7f9034;
  --vertyh-lime-800: #5d6b24;
  --vertyh-lime-900: #3d4915;
  --vertyh-lime-950: #202907;
  --vertyh-neutral-050: #f7f7f8;
  --vertyh-neutral-100: #e9e9eb;
  --vertyh-neutral-200: #cfcfd0;
  --vertyh-neutral-300: #b5b5b6;
  --vertyh-neutral-400: #9c9c9d;
  --vertyh-neutral-500: #848484;
  --vertyh-neutral-600: #6c6c6c;
  --vertyh-neutral-700: #555657;
  --vertyh-neutral-800: #404143;
  --vertyh-neutral-900: #2b2d2f;
  --vertyh-neutral-950: #181a1d;

  /* Cores por setor: só no anel do avatar do Funcionário Digital e em marcações de setor */
  --vertyh-sector-ceo-digital: #1a365b;
  --vertyh-sector-ceo-digital-accent: #c7de57;
  --vertyh-sector-marketing: #b298e3;
  --vertyh-sector-comercial: #73aceb;
  --vertyh-sector-relacionamento-com-o-paciente: #da8bb5;
  --vertyh-sector-operacao: #3abbc8;
  --vertyh-sector-financeiro: #91b66a;
  --vertyh-sector-rh: #e29070;
  --vertyh-sector-administrativo: #9fa9b3;

  /* Estados: comunicação funcional, sempre com texto ou símbolo junto */
  --vertyh-success: #157347;
  --vertyh-warning: #8a6100;
  --vertyh-error: #b02a25;

  /* Campos de Luz: base clara sob luzes desfocadas. Aproximação em CSS das elipses com
     Layer Blur do Figma (componentes 901:5574 a 901:5595); use como background do frame. */
  --vertyh-field-manha:
    radial-gradient(ellipse 45% 80% at 15% 15%, rgb(190 211 240 / 1), transparent),
    radial-gradient(ellipse 26% 46% at 85% 85%, rgb(229 241 182 / 0.8), transparent),
    #f7fafd;
  --vertyh-field-tarde:
    radial-gradient(ellipse 39% 69% at 10% 50%, rgb(154 184 221 / 0.7), transparent),
    radial-gradient(ellipse 16% 29% at 85% 15%, rgb(219 235 153 / 0.6), transparent),
    radial-gradient(ellipse 33% 58% at 50% 95%, rgb(190 211 240 / 0.6), transparent),
    #e9e9eb;
  --vertyh-field-foco-azul:
    radial-gradient(ellipse 36% 63% at 70% 50%, rgb(119 158 202 / 0.55), transparent),
    radial-gradient(ellipse 39% 69% at 10% 50%, rgb(190 211 240 / 0.7), transparent),
    #f7fafd;
  --vertyh-field-foco-verde:
    radial-gradient(ellipse 36% 63% at 50% 50%, rgb(219 235 153 / 0.7), transparent),
    radial-gradient(ellipse 26% 46% at 85% 15%, rgb(190 211 240 / 0.6), transparent),
    #fafceb;
  --vertyh-field-noite:
    radial-gradient(ellipse 45% 80% at 85% 15%, rgb(48 106 163 / 0.7), transparent),
    radial-gradient(ellipse 39% 69% at 10% 50%, rgb(33 71 114 / 0.8), transparent),
    radial-gradient(ellipse 13% 23% at 50% 100%, rgb(199 222 87 / 0.25), transparent),
    #1a365b;

  /* Tipo */
  --vertyh-font-display: "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --vertyh-font-text: "Satoshi", ui-sans-serif, system-ui, sans-serif;

  /* Forma */
  --vertyh-radius-capsule: 9999px;
  --vertyh-radius-block: 20px;
  --vertyh-radius-block-mobile: 10px;
  --vertyh-radius-glass: 20px;
  --vertyh-radius-card-glass-library: 24px;

  /* Tamanhos */
  --vertyh-size-button: 56px;
  --vertyh-size-field: 52px;
  --vertyh-size-icon-grid: 24px;
  --vertyh-size-icon-live-area: 20px;
  --vertyh-size-icon-stroke: 1.5px;
  --vertyh-size-avatar-sector: 72px;
  --vertyh-size-avatar-sector-ring: 4px;
  --vertyh-size-avatar-photo-slot: 56px;
  --vertyh-size-avatar-mini-orb: 20px;
  --vertyh-size-avatar-person: 32px;
  --vertyh-size-orb-lg: 112px;
  --vertyh-size-orb-md: 80px;
  --vertyh-size-orb-sm: 56px;
  --vertyh-size-orb-xs: 36px;

  /* Vidro Fosco (sobre Campo de Luz claro, texto Navy) e Fosco Escuro (sobre Navy ou foto,
     texto branco). O backdrop-filter faz o blur 52; na web é aproximação da receita do Figma.
     Use --vertyh-glass-stroke como border-image ou numa camada de 1 px interna. */
  --vertyh-glass-fill: rgb(255 255 255 / 0.14);
  --vertyh-glass-fill-tinted: rgb(255 255 255 / 0.24);
  --vertyh-glass-blur: 52px;
  --vertyh-glass-noise-opacity: 0.04;
  --vertyh-glass-stroke: linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.22));
  --vertyh-glass-sheen: linear-gradient(135deg, rgb(255 255 255 / 0.32), rgb(255 255 255 / 0) 50%, rgb(255 255 255 / 0.1));
  --vertyh-glass-shadow: 0 8px 32px rgb(26 54 91 / 0.06);
  --vertyh-glass-dark-fill: rgb(255 255 255 / 0.12);
  --vertyh-glass-dark-fill-tinted: rgb(255 255 255 / 0.2);
  --vertyh-glass-dark-noise-opacity: 0.05;
  --vertyh-glass-dark-shadow: 0 8px 32px rgb(8 20 43 / 0.22);

  /* Texto sobre foto: blur progressivo em quatro faixas e véu só junto do texto */
  --vertyh-photo-blur-1: 8px;
  --vertyh-photo-blur-2: 16px;
  --vertyh-photo-blur-3: 32px;
  --vertyh-photo-blur-4: 48px;
  --vertyh-photo-veil-navy-max: rgb(26 54 91 / 0.18);
  --vertyh-photo-veil-off-white-max: rgb(233 233 235 / 0.25);

  /* Motion: curvas respirar (entradas, luz, revelações) e orientar (estado, navegação). Sem bounce. */
  --vertyh-duration-micro: 160ms;
  --vertyh-duration-state: 240ms;
  --vertyh-duration-enter: 420ms;
  --vertyh-duration-reveal: 600ms;
  --vertyh-duration-circuit-line: 600ms;
  --vertyh-duration-circuit-label: 240ms;
  --vertyh-duration-light-field-min: 12s;
  --vertyh-duration-light-field-max: 20s;
  --vertyh-duration-orbit-1: 38s;
  --vertyh-duration-orbit-2: 56s;
  --vertyh-duration-orbit-3: 84s;
  --vertyh-ease-breathe: cubic-bezier(0.2, 0.8, 0.2, 1);
  --vertyh-ease-guide: cubic-bezier(0.4, 0, 0.2, 1);
}