:root {
  /* Colors - Panorama Med Brand */
  --primary: #836DCF;
  --primary-2: #9B8CD9;
  --lavender: #C9C1E8;
  --lavender-soft: #DDD8F2;
  --peach: #F2A07E;
  --peach-soft: #F7C7B2;
  
  --bg-page: #F7F6F8;
  --bg-card: #FFFFFF;
  --bg-soft: #F1EEF7;
  
  --text-main: #4F4B50;
  --text-muted: #7C7680;
  --border-soft: #E6E1EC;
  --input-bg: #EBF3FF;

  /* Aliases for semantic mapping */
  --bg: var(--bg-page);
  --surface: var(--bg-card);
  --surface-soft: var(--bg-soft);
  --surface-accent: var(--lavender-soft);
  
  --text: var(--text-main);
  --text-soft: var(--text-muted);
  --text-muted: var(--text-muted);

  --primary-dark: var(--primary-2);
  --primary-soft: var(--lavender-soft);

  --visit-upcoming-accent: var(--primary);
  --visit-completed-accent: #4caf50; /* Green stays for success */
  --visit-refused-surface: #f0f2f5;

  --border: var(--border-soft);
  --border-strong: var(--lavender);

  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --danger-border: rgba(239, 68, 68, 0.45);
  --success: #159c63;
  --success-soft: #e8f8f1;
  --info: var(--primary);
  --info-soft: var(--lavender-soft);

  /* Shadows */
  --shadow-sm: 0 4px 20px rgba(131, 109, 207, 0.08);
  --shadow-md: 0 8px 30px rgba(131, 109, 207, 0.12);
  --shadow-lg: 0 16px 48px rgba(131, 109, 207, 0.16);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Container & Spacing */
  --container: 1280px;
  --spacing-unit: 4px;

  /* Transitions */
  --ease-premium: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-normal: 0.25s;
  --dur-fade-up: 0.4s;
  --stagger-step: 0.03s;
}

/* Typography Hierarchy */
h1, .h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-main); }
h2, .h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--text-main); }
h3, .h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--text-main); }
.body-l { font-size: 1rem; line-height: 1.5; color: var(--text-main); }
.body-m { font-size: 0.9375rem; line-height: 1.5; color: var(--text-main); }
.body-s { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
.caption { font-size: 0.75rem; font-weight: 500; line-height: 1.4; color: var(--text-muted); }