:root {
  /* ============================================================
     COLOR SYSTEM — Light Theme
     ============================================================ */

  /* Page & surface backgrounds */
  --color-bg:             #f2f4f7;   /* page background — cool off-white */
  --color-surface:        #ffffff;   /* cards, panels, top bar */
  --color-surface-raised: #f8f9fb;   /* slightly elevated sections */
  --color-surface-hover:  #f0f2f6;   /* hover state on interactive surfaces */
  --color-surface-active: #e8ebf2;   /* pressed / active state */

  /* Borders */
  --color-border:         #dde1ea;   /* standard border */
  --color-border-subtle:  #eceef3;   /* dividers, inner borders */
  --color-border-strong:  #c5cad6;   /* emphasized borders */

  /* Text hierarchy */
  --color-text-primary:   #1a1f2e;   /* deep navy — headings, values */
  --color-text-secondary: #52596e;   /* labels, subtitles */
  --color-text-muted:     #8b92a5;   /* timestamps, hints */
  --color-text-disabled:  #bcc1cc;   /* disabled state */
  --color-text-inverse:   #ffffff;   /* text on dark/accent backgrounds */

  /* Accent — restrained slate-blue */
  --color-accent:         #3b5bdb;   /* primary action, active tab */
  --color-accent-hover:   #2f4dc4;   /* darker on hover */
  --color-accent-light:   #e8ecfb;   /* accent background tint */
  --color-accent-subtle:  rgba(59, 91, 219, 0.10); /* very soft tint */

  /* Semantic colors — adjusted for light bg readability */
  --color-success:        #2a9c5e;
  --color-success-subtle: #e9f7f0;
  --color-success-text:   #1f7549;

  --color-warning:        #c07c14;
  --color-warning-subtle: #fef4e3;
  --color-warning-text:   #a06510;

  --color-danger:         #c0392b;
  --color-danger-subtle:  #fdecea;
  --color-danger-text:    #9e2f25;

  --color-info:           #1971c2;
  --color-info-subtle:    #e3f0fd;
  --color-info-text:      #155aa0;

  /* Top bar specific */
  --color-topbar-bg:      #1e2540;   /* deep navy — anchors the app shell */
  --color-topbar-border:  #252c4a;
  --color-topbar-text:    #c8cfe8;   /* muted light for inactive tabs */
  --color-topbar-active:  #ffffff;   /* active tab text */
  --color-topbar-hover-bg: rgba(255,255,255,0.08);
  --color-topbar-active-bg: rgba(255,255,255,0.14);

  /* ============================================================
     SPACING SCALE
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-family:          'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:         11px;
  --font-size-sm:         12px;
  --font-size-base:       13px;
  --font-size-md:         14px;
  --font-size-lg:         16px;
  --font-size-xl:         20px;
  --font-size-2xl:        24px;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:    1.2;
  --line-height-snug:     1.35;
  --line-height-base:     1.5;

  /* ============================================================
     BORDERS & RADIUS
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — Subtle, light-theme appropriate
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0,0,0,0.06);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --topbar-height:     52px;
  --content-max-width: 1400px;
  --content-padding:   var(--space-6);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:   0.12s ease;
  --transition-base:   0.18s ease;
}