:root {
  /* Institute for Dermatology Palette */
  /* Focus: Clinical, Clean, Trustworthy. Avoiding standard medical blue.
     We'll use a deep Slate/Charcoal for primary, an earthy Sage for secondary accents,
     and crisp off-white for backgrounds to feel editorial and premium. */

  --color-primary: #1F2937;     /* Deep Slate */
  --color-secondary: #4B5563;   /* Mid Slate */
  --color-accent: #3F6256;      /* Sage Green */
  --color-accent-light: #E2E8E4; /* Pale Sage */
  --color-accent-dark: #2B453D;  /* Dark Sage */
  --color-danger: #991B1B;      /* Clinical Red */
  --color-danger-light: #FEE2E2;

  --color-bg: #FAFAF9;          /* Warm Off-White (Paper) */
  --color-bg-alt: #F3F4F6;      /* Cool Light Grey */
  --color-surface: #FFFFFF;     /* Pure White for cards/content */
  --color-border: #E5E7EB;

  --color-text: #111827;
  --color-text-muted: #6B7280;

  /* Typography */
  --font-display: 'Lora', serif;
  --font-body: 'Public Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Radii */
  --radius-s: 2px;
  --radius-m: 4px;
  /* We avoid "rounded-everything" and stick to sharp/minimal radii */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Container */
  --container-width: 1200px;
  --container-narrow: 800px;
}