/*
 * CareHub+ — Apresentação premium / Design tokens (CSS custom properties)
 *
 * Converte os tokens Dart do app (lib/core/theme/*.dart) para variáveis CSS,
 * mantendo os nomes. Onde o app e o game-site divergiam, vence o app:
 * primary #A78BFA, displayLarge 30px, labelLarge 16px. Toda cor, tamanho de
 * fonte, espaçamento, raio e sombra do palco vive aqui; os outros CSS leem só
 * por var(--…). Palco fixo 1920x1080 (variante 9:16 preparada, não usada).
 *
 * Author: Vitoria Lana
 * Created on: 23/10/2026
 * Version: 1.0.0
 * Squad: CareHub Plus
 */

:root {
  /* ---------- Palco (16:9; variante 9:16 preparada para o futuro) ---------- */
  --stage-w: 1920px;
  --stage-h: 1080px;
  --letterbox: #14102B;

  /* ---------- Paleta (app design system — AppColors) ---------- */
  --primary: #A78BFA;
  --primary-light: #AF9EE0;
  --primary-dark: #5A44A8;
  --accent-pink: #F472B6;
  --pink-light: #FBCFE8;

  --bg: #FFFFFF;
  --surface: #F8F6FF;
  --surface-variant: #F0ECFD;

  --text-primary: #1D1A21;
  --text-secondary: #494552;
  --text-hint: #B0B0C8;
  --text-inverse: #FFFFFF;

  --success: #437A22;
  --error: #D32F2F;
  --warning: #F59E0B;
  --info: #60A5FA;

  --divider: #E8E4F7;
  --border: #D4CEEF;

  /* Categorias (AppColors.categoryPalette) */
  --cat-green: #4CAF50;
  --cat-blue: #42A5F5;
  --cat-red: #D32F2F;
  --cat-orange: #F59E0B;
  --cat-purple: #A78BFA;
  --cat-pink: #F472B6;
  --cat-gray: #494552;

  /* SOS (AppColors.sos*) */
  --sos-1: #6F4BC6;
  --sos-2: #9B7BE8;
  --sos-ring-near: rgb(103 75 181 / .05);
  --sos-ring-far: rgb(103 75 181 / .10);

  /* Barra de progresso (AppColors.progressBar*) */
  --progress-1: #A78BFA;
  --progress-2: #80C4FF;
  --progress-3: #A5F3A5;
  --progress-4: #FACFE8;

  /* ---------- Gradientes de marca ---------- */
  --gradient-brand: linear-gradient(166.91deg, #A78BFA -8%, #FFFFFF 50%, rgba(251, 207, 232, 0.96) 108%);
  --gradient-progress: linear-gradient(90deg, #A78BFA, #80C4FF, #A5F3A5, #FACFE8);
  --gradient-sos: linear-gradient(135deg, #6F4BC6, #9B7BE8);
  --gradient-identity: linear-gradient(135deg, #F0ECFD, #FBCFE8);
  --gradient-text: linear-gradient(100deg, #A78BFA 0%, #FBCFE8 60%, #80C4FF 100%);
  --mask-soft: radial-gradient(closest-side, rgb(0 0 0) 45%, rgb(0 0 0 / 0) 100%);

  /* ---------- Tipografia (AppTypography; Inter + Averia Sans Libre) ---------- */
  --font-body: "Quicksand", "Inter", system-ui, sans-serif;
  --font-display: "Averia Sans Libre", "Quicksand", "Inter", system-ui, sans-serif;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* Rampa do app + tamanhos "telão" (legíveis a 10 m) */
  --fs-11: 11px;
  --fs-14: 14px;
  --fs-16: 16px;   /* labelLarge, titleMedium, bodyLarge (app) */
  --fs-18: 18px;   /* titleLarge (app) */
  --fs-24: 24px;   /* headlineMedium (app) */
  --fs-30: 30px;   /* displayLarge (app — vence a divergência) */
  --fs-40: 40px;   /* apoio em telão */
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;   /* título em telão */
  --fs-128: 128px; /* hero/numerais */
  --fs-180: 180px;

  --lh-tight: 1.1;
  --lh-title: 1.25;
  --lh-body: 1.5;
  --ls-section: 0.8px;

  /* ---------- Grid de 4px (AppSpacing) ---------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* Raios (AppSpacing.radius*) */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 999px;

  /* ---------- Sombras (AppShadows + sombras de cena da vitrine) ---------- */
  --shadow-card: 0 1px 2px rgb(0 0 0 / .08);
  --shadow-raised: 0 2px 6px rgb(0 0 0 / .06);
  --shadow-panel: 0 2px 2px rgb(0 0 0 / .07);
  --shadow-overlay: 0 -2px 16px rgb(0 0 0 / .08);
  --shadow-accent: 0 3px 6px rgb(167 139 250 / .25);
  --shadow-device: 0 48px 120px rgb(20 16 43 / .55), 0 12px 40px rgb(90 68 168 / .35);
  --shadow-glow-text: 0 0 24px rgb(167 139 250 / .55);
  --glow-primary: rgb(167 139 250 / .6);
  --glow-pink: rgb(251 207 232 / .7);

  /* ---------- Celular / vitrine (mesmo modelo da vitrine do game-site:
     .shot-frame--large — moldura fina, bezel escuro, notch-pílula no topo) --- */
  --device-w: 400px;
  --device-h: 812px;      /* proporção ~ iPhone 13 Pro 390x844 */
  --device-pad-top: 24px;
  --device-pad-side: 12px;
  --device-pad-bottom: 18px;
  --device-radius: 40px;  /* --radius-24 do site, ampliado para o telão */
  --device-screen-radius: 26px;
  --device-notch-w: 96px;
  --device-notch-h: 10px;
  --bezel: #1D1A21;
  --cam-perspective: 1800px;

  /* ---------- WhatsApp (só para a cena multicanal; fora da paleta do app) ---------- */
  --wa-wallpaper: #ECE4DB;
  --wa-bubble-out: #D8FDD4;
  --wa-bubble-in: #FFFFFF;
  --wa-header: #075E54;
  --wa-accent: #25D366;
  --wa-text-accent: #00795C;

  /* ---------- Durações / easing cinematográfico ---------- */
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-micro: 150ms;
  --dur-standard: 300ms;
  --dur-reveal: 700ms;
  --dur-scene: 900ms;

  /* ---------- Z-index ---------- */
  --z-aurora: 0;
  --z-scene: 10;
  --z-float: 20;
  --z-progress: 30;
  --z-hud: 40;
  --z-grain: 45;
}