:root {
  --bg.rgb: 248 250 252;
  --surface.rgb: 255 255 255;
  --surface.alt.rgb: 243 244 246;
  --fg.rgb: 17 24 39;
  --fg.subtle.rgb: 75 85 99;
  --brand.accent.rgb: 0 122 255;
  --brand.accent.secondary.rgb: 15 96 181;

  --semantic.positive.rgb: 22 163 74;
  --semantic.info.rgb: 59 130 246;
  --semantic.caution.rgb: 234 179 8;
  --semantic.negative.rgb: 220 38 38;

  --border.subtle.rgb: 226 232 240;
  --border.strong.rgb: 148 163 184;

  --radius.xs: 4px;
  --radius.sm: 6px;
  --radius.md: 8px;
  --radius.lg: 12px;

  --shadow.hairline: 0 0 0 1px rgba(15, 23, 42, 0.06);
  --shadow.lift: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow.layer: 0 6px 16px rgba(15, 23, 42, 0.12);

  --size.header.height: 64px;
  --size.footer.height: 56px;

  --layout.body.font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --layout.content.padding-y: 2rem;

  --comp.header.bg: var(--surface.rgb);
  --comp.header.fg: var(--fg.rgb);
  --comp.header.border: rgba(15, 23, 42, 0.08);
  --comp.header.logo.height: 40px;
  --comp.header.brand.fg: var(--fg.rgb);
  --comp.header.brand.subtitle.fg: var(--brand.accent.rgb);
  --comp.header.nav.fg: var(--fg.rgb);
  --comp.header.nav.fg.hover: var(--brand.accent.rgb);
  --comp.header.dropdown.bg: var(--surface.rgb);
  --comp.header.dropdown.shadow: var(--shadow.layer);

  --comp.footer.bg: var(--surface.alt.rgb);
  --comp.footer.fg: var(--fg.subtle.rgb);
  --comp.footer.border: rgba(15, 23, 42, 0.05);

  --comp.button.bg: var(--brand.accent.rgb);
  --comp.button.fg: 255 255 255;
  --comp.button.border: var(--brand.accent.rgb);
  --comp.button.bg.hover: var(--brand.accent.secondary.rgb);
  --comp.button.shadow: var(--shadow.hairline);

  --comp.card.bg: var(--surface.rgb);
  --comp.card.fg: var(--fg.rgb);
  --comp.card.border: var(--border.subtle.rgb);
  --comp.card.shadow: var(--shadow.lift);
  --comp.card.shadow.hover: var(--shadow.layer);
  --comp.card.radius: var(--radius.lg);

  --comp.stepper.bg: var(--surface.alt.rgb);
  --comp.stepper.fg: var(--fg.subtle.rgb);
  --comp.stepper.border: var(--border.subtle.rgb);
  --comp.stepper.active.bg: var(--brand.accent.rgb);
  --comp.stepper.active.fg: 255 255 255;
  --comp.stepper.completed.bg: 22 163 74;
  --comp.stepper.completed.fg: 255 255 255;
  --comp.stepper.line: rgba(15, 23, 42, 0.12);
  --comp.stepper.line.active: rgba(0, 122, 255, 0.6);
}

html[data-theme$="-dark"] {
  --bg.rgb: 15 23 42;
  --surface.rgb: 30 41 59;
  --surface.alt.rgb: 22 30 49;
  --fg.rgb: 226 232 240;
  --fg.subtle.rgb: 148 163 184;
  --brand.accent.rgb: 56 189 248;
  --brand.accent.secondary.rgb: 14 165 233;

  --semantic.positive.rgb: 74 222 128;
  --semantic.info.rgb: 96 165 250;
  --semantic.caution.rgb: 250 204 21;
  --semantic.negative.rgb: 248 113 113;

  --border.subtle.rgb: 51 65 85;
  --border.strong.rgb: 71 85 105;

  --shadow.hairline: 0 0 0 1px rgba(148, 163, 184, 0.22);
  --shadow.lift: 0 4px 12px rgba(2, 6, 23, 0.5);
  --shadow.layer: 0 12px 24px rgba(2, 6, 23, 0.65);

  --comp.footer.fg: var(--fg.rgb);
  --comp.footer.border: rgba(2, 6, 23, 0.55);
  --comp.stepper.line: rgba(148, 163, 184, 0.25);
  --comp.stepper.line.active: rgba(56, 189, 248, 0.65);
  --comp.stepper.completed.bg: 34 197 94;
}