/*
 * CareHub Plus — Design tokens (CSS custom properties)
 *
 * Every colour, size, spacing, radius, shadow, z-index and CSS-only duration
 * used by the pitch site lives here, on :root. The values mirror the app's
 * design system (primary #A78BFA). All other stylesheets read these tokens
 * through var(--…) only, so a change here restyles the whole site at once.
 *
 * Author: Vitoria Lana
 * Created on: 21/10/2026
 * Version: 1.0.0
 * Squad: CareHub Plus
 */

:root {
  /* Palette (app design system) */
  --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;
  --border: #E8E4F7;
  --border-strong: #D4CEEF;
  --cat-green: #4CAF50;
  --cat-blue: #42A5F5;
  --cat-red: #D32F2F;
  --cat-orange: #F59E0B;
  --cat-purple: #A78BFA;
  --cat-pink: #F472B6;
  --cat-gray: #494552;
  --progress-1: #A78BFA;
  --progress-2: #80C4FF;
  --progress-3: #A5F3A5;
  --progress-4: #FACFE8;
  --sos-1: #6F4BC6;
  --sos-2: #9B7BE8;
  --gradient-brand: linear-gradient(166.91deg, #A78BFA -100.78%, #FFFFFF 46.34%, rgba(251, 207, 232, 0.96) 178.75%);
  --gradient-progress: linear-gradient(90deg, #A78BFA, #80C4FF, #A5F3A5, #FACFE8);
  --gradient-sos: linear-gradient(135deg, #6F4BC6, #9B7BE8);
  /* Cora identity card in the mocks (print 03: lilac to pink) */
  --gradient-identity: linear-gradient(135deg, #F0ECFD, #FBCFE8);
  /* Soft round edge for the stage-6 glow disc (alpha mask) */
  --mask-soft: radial-gradient(closest-side, rgb(0 0 0) 45%, rgb(0 0 0 / 0) 100%);

  /* Typography: families, weights, ramp 11–30 plus hero sizes */
  --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;
  --fs-11: 11px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-35: 35px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-96: 96px;
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --ls-section: 0.8px;

  /* 4 px grid, radii, shadows */
  --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-48: 48px;
  --space-64: 64px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-full: 999px;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .08);
  --shadow-overlay: 0 -2px 16px rgb(0 0 0 / .08);
  --shadow-device: 0 8px 32px rgb(90 68 168 / .18);
  --shadow-accent: 0 3px 6px rgb(167 139 250 / .25);
  --shadow-glow-text: 0 0 12px rgb(167 139 250 / .6);

  /* Outside the app palette */
  --partner-claro-red: #E30613;
  --wa-wallpaper: #F5F1E8;
  --wa-bubble-out: #D8FDD4;
  --wa-bubble-in: #FFFFFF;
  --wa-notice: #D7FBED;
  --wa-header: #FFFFFF;
  --wa-accent: #1DAB61;      /* decorative only (2.98:1), never text */
  --wa-text-accent: #00795C; /* text green, 5.40:1 */
  --grade-neutral: #808080;
  --grade-cool: #60A5FA;
  --grade-pop: #A78BFA;
  /* C3: the Cora-chat user bubble and lilac app buttons keep the app fill */
  --sim-user-bubble: #A78BFA;
  --sim-user-text: #1D1A21;  /* 6.31:1 on #A78BFA */
  --bezel: #1D1A21;
  --sim-chip-bg: rgb(175 158 224 / .2);
  --sim-card-border: rgb(175 158 224 / .4);
  --light-key: rgb(167 139 250 / .35);
  --light-rim: rgb(251 207 232 / .7);
  --board-depth: rgb(90 68 168 / .25);
  --ground-core: rgb(90 68 168 / .22);
  --ground-edge: rgb(90 68 168 / 0);
  --glow-primary: rgb(167 139 250 / .6);
  --scrim: rgb(29 26 33 / .18);
  --outline: #1D1A21;
  --outline-w: 3px;
  --outline-w-small: 2px;
  --focus-w: 3px;
  --track-outline-w: 22px;
  --track-w: 16px;
  --final-ring-w: 3px;
  --ring-under-w: 7px;
  --ring-w: 4px;
  --dash: 8px;
  --shade-opacity: 0.25;

  /* Layout and 3D */
  --device-max: 480px;
  --device-max-h: 932px;
  --device-gap: 48px;
  --cam-perspective: 1000px;
  --dice-perspective: 400px;
  --dice-size: 64px;
  --dice-half: 32px;
  --dice-pip: 10px;
  --touch-min: 44px;
  --cta-h: 56px;
  --hud-h: 72px;
  --controls-h: 96px;
  --board-w: 336px;
  --board-h: 528px;
  --board-depth-offset: 8px;
  --square-d: 64px;
  --square-final-d: 80px;
  --label-box: 32px;
  --size-card: 420px;
  --size-phone: 320px;
  --size-phone-h: 600px;
  --size-shot-slide: 320px;
  --size-shot-frame: 220px;
  --size-shot-frame-lg: 300px;
  /* Stage-6 app screens: responsive frame (width = available height x ratio) */
  --size-shot-frame-xl: 460px;
  --size-shot-frame-min: 180px;
  --size-shot-zoom: 640px;
  --shot-frame-ratio: 0.497;
  --sim-reserve-col: 400px;
  --size-nav-dot: 8px;
  --sim-swipe-min: 48px;
  --size-logo-hero: 180px;
  --size-logo-intro: 260px;
  --size-intro-mariana: 260px;
  --size-intro-pill: 300px;
  --size-partner-logo: 64px;
  --size-partner-rule: 6px;
  --size-token-base: 56px;
  --size-hud-logo-h: 24px;
  --size-avatar-40: 40px;
  --size-avatar-32: 32px;
  --size-avatar-16: 16px;
  --size-icon-20: 20px;
  --size-icon-14: 14px;
  --size-icon-12: 12px;
  --size-dot: 12px;
  --size-glow: 320px;
  --bezel-w: 8px;
  --notch-w: 72px;
  --notch-h: 14px;
  --size-send: 32px;
  --size-send-wa: 36px;
  --size-typing-dot: 6px;
  --size-badge: 18px;
  --pill-bottom: 132px;
  /* Finale, showcase, end and confetti */
  --notch-shot-w: 48px;
  --notch-shot-h: 6px;
  --size-counter: 56px;
  --size-store-badge: 136px;
  --size-confetti-w: 12px;
  --size-confetti-h: 8px;
  --size-confetti-dot: 8px;
  --radius-2: 2px;
  --glow-edge: rgb(167 139 250 / 0);
  --z-scene: 0;
  --z-grade: 10;
  --z-scene2d: 15;
  --z-hud: 20;
  --z-controls: 25;
  --z-intro: 28;
  --z-layer: 30;
  --z-cover: 40;
  --z-fatal: 50;

  /* CSS-only transitions (focus, hover) */
  --dur-micro: 150ms;
  --dur-standard: 300ms;
  --busy-opacity: 0.6;
}