:root {
  /* Dusk Blue Theme System - Primary Accent (Matches Planner) */
  --color-primary-accent: #3d5a80;      /* Dusk Blue: Core branding, active states, key focus */
  --color-secondary-accent: #98c1d9;    /* Ice Blue: Secondary controls, borders, graphic paths */
  --color-success: #8acb88;             /* Validation green */
  --color-destructive: #ee6c4d;         /* Peach/Orange: Destructive alerts */
  --color-highlight: #ede7b1;           /* Soft yellow alert fill */

  /* Canvas Layers & Text Layouts */
  --color-bg-base: #f5f5f7;             /* Off-White: Body page context */
  --color-bg-surface: #ffffff;          /* Pure White: Content containers & inputs */
  --color-text-primary: #1a1a1a;        /* Off-Black: Crisp typography readability */
  --color-text-muted: #666666;          /* Charcoal: Secondary text alignment */
  --color-border: #e5e7eb;              /* Light Gray: Geometric layout boundaries */
  --color-border-hover: #cbd5e1;        /* Medium Gray: Input border hover state */

  /* Right Pane Background & Graphic System (Matches Planner color theme) */
  --color-dark-bg: #3d5a80;             /* Dusk Blue: Right pane base canvas background */
  --color-dark-graphic-ring: rgba(152, 193, 217, 0.2); /* Semi-transparent Ice Blue orbits */
  --color-dark-graphic-arc: rgba(152, 193, 217, 0.5);   /* Ice Blue rotating arcs */
  --color-dark-graphic-core: #98c1d9;  /* Glowing core Ice Blue */
  
  /* Semi-transparent Blend Layers */
  --color-overlay-bg: rgba(26, 26, 26, 0.5); /* Modal blur backdrops */
  --color-neutral-shaded: rgba(26, 26, 26, 0.05); /* List alternate row shading */

  /* Structural Geometry Scales */
  --border-radius-sm: 4px;              /* Maximum sharp corner clip (Matches Planner) */
  --border-radius-lg: 8px;
  --grid-gap-base: 20px;                /* Uniform layout gap density */
  --interactive-height: 44px;           /* Touch surface accessible bounds (Matches Planner) */
}