:root {
  /* Primary brand */
  --color-primary:       #1d6fa4;
  --color-primary-light: #e8f2fa;
  --color-primary-dark:  #155680;

  /* Indication colors */
  --color-cd:        #c0392b;
  --color-cd-light:  #fdecea;
  --color-uc:        #1a7a4a;
  --color-uc-light:  #e6f4ed;

  /* Drug class badge palette */
  --color-anti-tnf:         #c04000;
  --color-anti-integrin:    #1d6fa4;
  --color-il-12-23:         #1a7a4a;
  --color-il-23:            #0e7490;
  --color-jak:              #6b48b8;
  --color-s1p:              #b5451b;

  /* Callout boxes */
  --color-escalation-bg:     #fff8e1;
  --color-escalation-border: #f59e0b;
  --color-escalation-text:   #92400e;
  --color-tdm-bg:            #e0f7fa;
  --color-tdm-border:        #00acc1;
  --color-tdm-text:          #006064;

  /* Surfaces and neutrals */
  --color-surface:          #ffffff;
  --color-background:       #f0f4f8;
  --color-border:           #dde3ea;
  --color-border-strong:    #c4cdd6;
  --color-text-primary:     #1a2332;
  --color-text-secondary:   #4a5568;
  --color-text-muted:       #8a9aaa;

  /* Timeline dot colors */
  --color-dot-iv:    #1d6fa4;
  --color-dot-sc:    #1a7a4a;
  --color-dot-oral:  #6b48b8;
  --color-dot-track: #dde3ea;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --leading-tight: 1.25;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  /* Spacing */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */

  /* Border radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-header: 0 1px 0 var(--color-border);

  /* Layout */
  --header-height: 76px;
  --max-content:   900px;
  --page-padding:  var(--space-4);
}