:root {
  /* Color Tokens - Dark theme (default) */
  --bricks-color-bg: #0d1117; /* Page background - dark slate */
  --bricks-color-surface: #161b22; /* Surface background - slightly lighter dark (for cards, headers, alt sections) */
  --bricks-color-text: #e0e6ed; /* Primary text color - light gray for dark bg */
  --bricks-color-text-alt: #a8b3c1; /* Muted text (for hints or secondary info) */
  --bricks-color-primary: #3772aa; /* Primary accent - deep muted blue (admin-trust tone) */
  --bricks-color-text-on-primary: #ffffff; /* Text on primary accent - white for contrast */
  --bricks-color-button-secondary: #ffffff; /* Secondary button text/border on dark bg (white) */

  /* Spacing Tokens (consistent spacing scale) */
  --bricks-space-1: 0.25rem; /* 4px - extra-small spacing */
  --bricks-space-2: 0.5rem; /* 8px - small spacing */
  --bricks-space-3: 1rem; /* 16px - base spacing */
  --bricks-space-4: 1.5rem; /* 24px - medium spacing */
  --bricks-space-5: 2rem; /* 32px - large spacing */
  --bricks-space-6: 3rem; /* 48px - extra-large spacing */

  /* Radius & Shadow Tokens */
  --bricks-radius-sm: 4px; /* Small radius for buttons */
  --bricks-radius-md: 8px; /* Medium radius for cards/sections */
  --bricks-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle small shadow for elevation */
  --bricks-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3); /* Larger shadow for modals or depth */

  /* Typography Tokens */
  --bricks-font-family-base: "Segoe UI", Tahoma, Verdana, sans-serif; /* Base font - clear sans-serif (dyslexia-friendly) */
  --bricks-font-family-heading: var(
    --bricks-font-family-base
  ); /* Heading font - (could be same as base for consistency) */
  --bricks-font-size-base: 16px; /* Base font size (16px ~ 1rem) */
  --bricks-line-height-base: 1.6; /* Base line-height (1.5 or above for comfortable reading) */
}
[data-theme="light"] {
  /* Light theme overrides */
  --bricks-color-bg: #f8fbff; /* Page background - soft neutral off-white */
  --bricks-color-surface: #ffffff; /* Surface background - white (cards, etc.) */
  --bricks-color-text: #1a1a1a; /* Primary text - nearly black for light bg */
  --bricks-color-text-alt: #555e66; /* Muted text - medium gray */
  /* Primary accent remains the same muted blue for branding */
  --bricks-color-primary: #3772aa;
  --bricks-color-text-on-primary: #ffffff; /* (ensure text on primary is still white) */
  --bricks-color-button-secondary: #000000; /* Secondary button text/border on light bg (black) */
  /* Other tokens (spacing, radius, shadows, typography) remain identical in light mode */
}