/* Leona design tokens (brand book: leonabrand.figma.site). Use these variables everywhere;
   never hard-code hex values in slice CSS. The first block is the contract from docs/ARCHITECTURE.md §7. */
:root {
  /* ---- Brand contract ---- */
  --purple: #25008E;
  --purple-dark: #160055;
  --purple-light: #F7F0FD;
  --purple-soft: #E8E0FF;
  --cream: #F6F4F0;
  --cream-light: #FBF9F7;
  --sand: #E9E6E1;
  --ink: #160055;
  --ink-2: rgba(22, 0, 85, .70);
  --ink-3: rgba(22, 0, 85, .48);
  --line: rgba(22, 0, 85, .10);
  --green: #00BD81;
  --red: #FF3956;
  --blue: #2657FF;
  --fucsia: #CE24DD;
  --lime: #97BD00;
  --violet: #8B39FF;
  --orange: #FF9626;
  --teal: #10ACAF;
  --amber: #FFA600;
  --grape: #712078;
  --grad-soft: linear-gradient(180deg, #C9B8FF 0%, #F8D9C8 45%, #FBF9F7 100%);
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-1: 0 1px 2px rgba(22, 0, 85, .04), 0 2px 8px rgba(22, 0, 85, .05);
  --shadow-2: 0 2px 6px rgba(22, 0, 85, .04), 0 14px 36px rgba(22, 0, 85, .09);
  --font-display: 'Neue Montreal', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Extended purples & warm neutrals ---- */
  --purple-tint: #EFE9FF;          /* soft tint for secondary buttons, chips, reason labels */
  --purple-hover: #1C006F;
  --purple-press: #160055;
  --lavender: #C4AFFA;
  --lavender-2: #A98AFF;
  --peach: #F8C7AD;
  --peach-light: #F6EBE2;
  --white: #FFFFFF;
  --surface: #FFFFFF;              /* cards on cream */
  --surface-2: #FBF9F7;            /* nested / quiet surfaces */
  --bg: #F6F4F0;                   /* app background */
  --ink-muted: rgba(22, 0, 85, .60); /* AA-safe muted text (placeholders, captions) */
  --line-strong: rgba(22, 0, 85, .16);
  --line-soft: rgba(22, 0, 85, .06);
  --on-dark: #FBF9F7;
  --on-dark-2: rgba(251, 249, 247, .72);

  /* ---- Gradients ---- */
  --grad-hero: linear-gradient(180deg, #A98AFF 0%, #C4AFFA 22%, #F8C7AD 58%, #F6F4F0 100%);
  --grad-dark: linear-gradient(180deg, #C4AFFA 0%, #F6EBE2 100%);
  --grad-glow: radial-gradient(120% 90% at 20% 0%, rgba(169, 138, 255, .55) 0%, rgba(248, 199, 173, .45) 45%, rgba(246, 244, 240, 0) 75%);
  --grad-mark: linear-gradient(135deg, #C4AFFA 0%, #F8C7AD 100%);

  /* ---- Status (text-safe "ink" shades pass WCAG AA on their tints) ---- */
  --success: var(--green);
  --success-ink: #00704F;
  --success-tint: #E3F8F0;
  --danger: var(--red);
  --danger-strong: #D91A3C;        /* AA with white text */
  --danger-ink: #C4102F;
  --danger-tint: #FFE9EC;
  --warning: var(--amber);
  --warning-ink: #8A5300;
  --warning-tint: #FFF4DB;
  --info: var(--blue);
  --info-ink: #1F45D6;
  --info-tint: #E8EDFF;
  --whatsapp: #25D366;
  --whatsapp-hover: #1EBE5A;
  --whatsapp-ink: #0B3B20;

  /* ---- Type scale ---- */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;
  --fs-4xl: 48px;
  --fs-5xl: 60px;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --track-display: -0.02em;
  --track-tight: -0.01em;

  /* ---- Spacing (4px grid) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- Shape ---- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --shadow-3: 0 12px 32px rgba(22, 0, 85, .10), 0 40px 96px rgba(22, 0, 85, .20);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .14);
  --ring: 0 0 0 4px rgba(37, 0, 142, .16);
  --ring-danger: 0 0 0 4px rgba(255, 57, 86, .16);
  --focus: 2px solid var(--purple);
  --focus-on-dark: 2px solid var(--lavender);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---- Layout ---- */
  --touch: 44px;
  --sidebar-w: 256px;
  --topbar-h: 64px;
  --tabbar-h: 64px;
  --patient-w: 560px;
  --content-w: 1200px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* ---- Layers ---- */
  --z-sticky: 20;
  --z-sidebar: 30;
  --z-tabbar: 40;
  --z-menu: 60;
  --z-overlay: 100;
  --z-toast: 200;
  --z-progress: 300;
}