/* MediCalli — Design Tokens (Clinical Modern v3) */

:root {
  /* ── Breakpoints (reference only, use in media queries) ── */
  --bp-mobile-max: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1024px;
  --bp-desktop-min: 1025px;

  /* ── Surfaces ── */
  --bg: #f7f9ff;
  --surface: #f7f9ff;
  --surface-dim: #c9dcf3;
  --surface-bright: #f7f9ff;
  --surface-lowest: #ffffff;
  --surface-container-low: #edf4ff;
  --surface-container: #e3efff;
  --surface-container-high: #d9eaff;
  --surface-container-highest: #d1e4fb;
  --surface-variant: #d1e4fb;
  --bg-soft: #edf4ff;
  --bg-mist: rgba(247, 249, 255, 0.92);

  /* ── Text ── */
  --text: #091d2e;
  --text-primary: #091d2e;
  --text-secondary: #3e4948;
  --text-variant: #3e4948;
  --on-surface: #091d2e;
  --on-surface-variant: #3e4948;
  --inverse-surface: #203243;
  --inverse-on-surface: #e8f2ff;

  /* ── Primary / Accent ── */
  --accent: #004d4d;
  --accent-dark: #004d4d;
  --accent-light: rgba(0, 77, 77, 0.08);
  --accent-container: #006767;
  --surface-tint: #066969;
  --primary-fixed: #a2f0ef;
  --primary-fixed-dim: #86d4d3;
  --on-primary-fixed: #002020;
  --inverse-primary: #86d4d3;
  --premium-gradient: linear-gradient(135deg, #006767 0%, #004d4d 100%);

  /* ── Secondary / Action ── */
  --secondary: #944a00;
  --secondary-container: #ff9f56;
  --secondary-soft: rgba(148, 74, 0, 0.1);
  --accent-warm: #E67E22;
  --accent-warm-soft: rgba(230, 126, 34, 0.12);
  --accent-warm-hover: #d35400;

  /* ── Semantic ── */
  --eco-cyan: #008080;
  --success: #008080;
  --success-light: rgba(0, 128, 128, 0.12);
  --whatsapp: #25D366;
  --error: #ba1a1a;

  /* ── Borders ── */
  --border: rgba(111, 121, 121, 0.2);
  --border-strong: #bec9c8;
  --outline: #6f7979;
  --outline-variant: #bec9c8;

  /* ── Typography ── */
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans: var(--font-body);

  --text-display-lg: clamp(1.75rem, 4.5vw, 3rem);
  --text-headline-lg: clamp(1.5rem, 3vw, 2rem);
  --text-headline-md: 1.5rem;
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-label-md: 0.875rem;
  --text-label-sm: 0.75rem;

  /* ── Spacing ── */
  --max: 1280px;
  --margin-mobile: 16px;
  --margin-tablet: 32px;
  --margin-desktop: 48px;
  --gutter: 24px;
  --stack-sm: 8px;
  --stack-md: 16px;
  --stack-lg: 32px;
  --section-gap: 96px;
  --section-gap-tablet: 80px;
  --section-gap-mobile: 64px;

  /* ── Radius ── */
  --radius: 20px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 40px;

  /* ── Shadows ── */
  --shadow-card: 0 1px 3px rgba(9, 29, 46, 0.06);
  --shadow-card-hover: 0 20px 40px -15px rgba(0, 77, 77, 0.18);
  --shadow-glow: 0 25px 50px -12px rgba(9, 29, 46, 0.25);

  /* ── Header ── */
  --header-bar-h: 80px;
  --header-cats-h: 0px;
  --header-h: var(--header-bar-h);

  /* ── Easing ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}