/* =========================================================================
   Mars Specialised Hospital — Design Tokens
   Ported verbatim from the original Lovable design system (oklch values).
   These power both the theme and the Elementor widgets so colours, fonts,
   radii, shadows and gradients render identically across all devices.
   ========================================================================= */

:root {
  --radius: 0.5rem;

  /* Mars Specialised Hospital palette: blue primary, red accent, black text */
  --background: rgb(255, 255, 255);
  --foreground: rgb(8, 13, 22);
  --card: rgb(255, 255, 255);
  --card-foreground: rgb(8, 13, 22);
  --popover: rgb(255, 255, 255);
  --popover-foreground: rgb(8, 13, 22);
  --primary: rgb(6, 89, 240);
  --primary-foreground: rgb(252, 252, 252);
  --primary-dark: rgb(4, 64, 173);
  --primary-soft: rgb(226, 245, 255);
  --secondary: rgb(240, 248, 255);
  --secondary-foreground: rgb(11, 22, 40);
  --muted: rgb(242, 247, 252);
  --muted-foreground: rgb(85, 95, 105);
  --accent: rgb(225, 48, 42);
  --accent-foreground: rgb(252, 252, 252);
  --destructive: rgb(225, 48, 42);
  --destructive-foreground: rgb(252, 252, 252);
  --border: rgb(228, 232, 237);
  --input: rgb(228, 232, 237);
  --ring: rgb(6, 89, 240);

  --sidebar: rgb(248, 250, 252);

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;

  --shadow-card: 0 8px 24px -12px rgba(6, 89, 240, 0.15);
  --gradient-primary: linear-gradient(135deg, rgb(6, 89, 240) 0%, rgb(4, 64, 173) 100%);
  --gradient-accent: linear-gradient(135deg, rgb(225, 48, 42) 0%, rgb(158, 34, 29) 100%);

  /* Layout helpers */
  --mms-container: 80rem;       /* max-w-7xl */
  --mms-container-px: 1.5rem;   /* px-6 */
}

/* Tailwind-equivalent radius helpers used by widgets */
:root {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}