/* Tidal — Portal Genesis design tokens
   SOMENTE variáveis (:root + dark). Classes globais, keyframes, media
   queries e print vivem em styles/components.css.
   Fonte única também das páginas públicas de cadastro
   (cadastro-externo.html e cadastro-tripulante.html) desde a unificação
   de ago/2026 — o antigo public/vendor/genesis-tokens.css foi aposentado:
   --ok/--warn/--bad viraram --success/--warning/--danger,
   --radius/--radius-sm viraram --r-lg/--r-md, --shadow virou --shadow-md. */

:root {
  /* Cream tones */
  --cream: #FBF7F0;
  --cream-2: #F3EDE3;
  --cream-3: #ECE3D0;

  /* Stone — cinza neutro claro: zebra de tabelas e containers de segmented controls */
  --stone: #F1F1EF;

  /* Ink (text) — tons quentes vindos das páginas públicas na unificação */
  --ink: #2A2826;
  --ink-2: #5C5855;
  --muted: #8E8985;
  --muted-2: #948B7E;
  --muted-3: #C7BEAE;

  /* Lines — alphas reforçados para contraste, matiz rebazada pro novo ink */
  --line: rgba(42,40,38,0.20);
  --line-soft: rgba(42,40,38,0.12);
  --line-strong: rgba(42,40,38,0.30);

  /* Surfaces */
  --surface: #FFFFFF;
  --surface-2: #FBF7F0;
  --nav-bg: #1F2A2E;
  --nav-fg: #FBF7F0;

  /* Sombras — profundidade para cards e botões saltarem do fundo */
  --shadow-sm: 0 1px 2px rgba(42,40,38,0.06), 0 1px 3px rgba(42,40,38,0.08);
  --shadow-md: 0 2px 6px rgba(42,40,38,0.08), 0 4px 12px rgba(42,40,38,0.06);
  --shadow-lg: 0 8px 24px -8px rgba(42,40,38,0.18), 0 4px 8px rgba(42,40,38,0.06);

  /* Accent (coral) */
  --accent: #D9694B;
  --accent-2: #B14E36;
  --accent-soft: #F8DDD0;
  --on-color: #FBF7F0;   /* texto/ícone sobre fundo colorido (avatar, badge) — constante nos dois temas */

  /* Semantic */
  --teal: #1F5755;
  --teal-2: #173F3E;
  --sky: #5C8DAE;
  --leaf: #5C7E4F;
  --sun: #C68A1F;
  --rose: #B14E5C;
  --rose-soft: rgba(177,78,92,0.13);

  /* Softs — fundos tintados (usados em pills, caixas de aviso, gradientes) */
  --teal-soft: rgba(31,87,85,0.12);
  --sky-soft: rgba(92,141,174,0.15);
  --leaf-soft: rgba(92,126,79,0.15);
  --sun-soft: rgba(198,138,31,0.15);
  --coral-soft: var(--accent-soft);
  --coral-2: var(--accent-2);

  /* Status — semáforo único (sucesso/aviso/perigo/info) sobre os tons do tema */
  --success: var(--leaf);
  --success-soft: var(--leaf-soft);
  --warning: var(--sun);
  --warning-soft: var(--sun-soft);
  --danger: var(--rose);
  --danger-soft: var(--rose-soft);
  --info: var(--sky);
  --info-soft: var(--sky-soft);

  /* Overlay — fundo escurecido de modais e drawers */
  --overlay: rgba(42,40,38,0.5);

  /* Papéis e gênero — classes sem tom próprio na paleta base */
  --role-catering: #7A6EA6;
  --role-terc: #5F7A8C;
  --female: #C36474;
  --male: #7FA8C9;

  /* On-dark — tintas creme sobre superfícies sempre escuras (mapa de cabines, kiosk) */
  --on-dark: #F5EFE3;
  --on-dark-dim: rgba(245,239,227,0.55);
  --on-dark-line: rgba(245,239,227,0.14);
  --on-dark-faint: rgba(245,239,227,0.07);

  /* Berth tones */
  --berth-cmd: #1F5755;
  --berth-crew: #5C7E4F;
  --berth-ops: #5C8DAE;
  --berth-guest: #C68A1F;

  /* Type */
  --f: 'Inter', -apple-system, system-ui, sans-serif;
  --fs: 'Fraunces', Georgia, serif;
  --fm: 'IBM Plex Mono', ui-monospace, monospace;

  /* Sizes */
  --pad: 32px;
  --pad-md: 24px;
  --pad-sm: 16px;

  /* Radii — escala única (auditoria: 44 valores distintos nos JSX → estes 6 cobrem ~90%) */
  --r-sm: 8px;       /* botões caixa, chips, ícones quadrados */
  --r-md: 12px;      /* inputs, pills de filtro, toggles */
  --r-lg: 16px;      /* cards */
  --r-xl: 24px;      /* modais, drawers */
  --r-pill: 999px;   /* pills, chips seletores e toggles (não botões) */
  --r-circle: 50%;   /* avatares, dots */

  /* Type scale — miolo (auditoria: 60 valores, 560 meios-pontos → estes 9 cobrem ~85%) */
  --text-2xs: 9.5px;
  --text-xs: 10.5px;
  --text-sm: 11.5px;
  --text-md: 12.5px;
  --text-base: 13.5px;
  --text-lg: 14.5px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 30px;

  /* Z-index — camadas semânticas (auditoria: 50 valores, dois dialetos → 6 camadas) */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 40;
  --z-overlay: 200;
  --z-modal: 8000;
  --z-toast: 9000;
}

[data-theme="dark"] {
  --cream:   #1A2024;
  --cream-2: #14191D;
  --cream-3: #232B30;
  --stone: #232B30;
  --ink:     #ECE3D0;
  --ink-2:   #D6CCB6;
  --muted:   #9C9484;
  --muted-2: #756E61;
  --muted-3: #4A4639;
  --teal: #5FA8A5;
  --sky:  #7FA8C9;
  --leaf: #85A876;
  --sun:  #D9A94A;
  --rose: #C97F8B;
  --rose-soft: rgba(201,127,139,0.15);
  /* Softs no dark — tintas claras com alpha baixo (visíveis sobre superfície escura) */
  --teal-soft: rgba(95,168,165,0.16);
  --sky-soft: rgba(127,168,201,0.16);
  --leaf-soft: rgba(133,168,118,0.16);
  --sun-soft: rgba(217,169,74,0.16);
  --overlay: rgba(0,0,0,0.6);
  --line: rgba(236,227,208,0.18);
  --line-soft: rgba(236,227,208,0.10);
  --line-strong: rgba(236,227,208,0.28);
  --surface: #1F262B;
  --surface-2: #1A2024;
  --nav-bg: #101417;
  --nav-fg: #ECE3D0;
  /* Accent no dark — mesma matiz, croma reduzido; o "soft" vira tinta escura
     (antes era o rosa-claro do light vazando em pills, cards e anel de foco) */
  --accent: #DA7A5C;
  --accent-2: #E5967B;
  --accent-soft: rgba(217,105,75,0.22);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 24px -8px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
}