:root {
  /* Brand */
  --brand: #178d72;
  --brand-600: #0f6b55;
  --brand-700: #0a5946;
  --brand-300: #2aad8e;
  --brand-100: #e8f5f1;
  --brand-50:  #f3faf7;

  /* Neutrals - Light theme default */
  --bg:           #f5f7f6;
  --surface:      #ffffff;
  --surface-2:    #f5faf8;
  --surface-3:    #eef3f1;
  --border:       #e1ebe7;
  --border-soft:  #ecf2ef;
  --text:         #0f1e1b;
  --text-muted:   #5a7069;
  --text-soft:    #8aa097;

  /* Feedback surfaces. Kept as tokens because a fixed dark green on a dark
     background is the one thing a theme switch cannot fix by itself. */
  --ok-fg: #0a5946;
  --ok-bg: #f3faf7;
  --ok-bd: #2aad8e;
  --err-fg: #8c2820;
  --err-bg: #fdeceb;
  --err-bd: #f2b6b1;
  --warn-fg: #8a5300;
  --warn-bg: #fff7ed;
  --warn-bd: #f0c48a;

  --danger:  #e2453c;
  --warning: #d97706;
  --info:    #2476d8;
  --success: #1ea76b;

  /* Type */
  --font:      'Red Hat Display', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sizing */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15,30,27,.04), 0 1px 1px rgba(15,30,27,.03);
  --shadow-sm: 0 1px 3px rgba(15,30,27,.06), 0 2px 8px rgba(15,30,27,.04);
  --shadow-md: 0 2px 6px rgba(15,30,27,.06), 0 12px 32px rgba(15,30,27,.10);
  --shadow-lg: 0 4px 12px rgba(15,30,27,.08), 0 24px 60px rgba(15,30,27,.14);

  --header-h: 60px;
  --subnav-h: 52px;
}

/* Dark theme */
[data-theme="dark"] {
  --bg:           #0a1512;
  --surface:      #0f1e1b;
  --surface-2:    #142624;
  --surface-3:    #1a2f2b;
  --border:       #1f3531;
  --border-soft:  #18302b;
  --text:         #e8f1ee;
  --text-muted:   #9fb3ad;
  --text-soft:    #6e8780;

  --brand-100:    rgba(42,173,142,.16);
  --brand-50:     rgba(42,173,142,.08);

  --ok-fg: #74d9bb;
  --ok-bg: rgba(42,173,142,.12);
  --ok-bd: rgba(42,173,142,.42);
  --err-fg: #f2a49d;
  --err-bg: rgba(226,69,60,.14);
  --err-bd: rgba(226,69,60,.42);
  --warn-fg: #f0b464;
  --warn-bg: rgba(217,119,6,.14);
  --warn-bd: rgba(217,119,6,.42);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.32);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);
}