:root {
  /* ---------------------------------
   1. Core Colors (Light Mode)
  --------------------------------- */
  --bg: #fff;
  --card-bg: #282828;
  --card-fg:#fff;
  --fg: #282828;

  --white: rgba(233, 247, 230, 0.85);
  --muted: rgba(119, 131, 141, 1);
  --accent: rgba(0, 122, 204, 1);

  --window-close-fg: rgba(233, 247, 230, 0.85);
  --window-close-bg: rgba(0, 170, 0, 0.85);

  --hover-bg: rgba(255, 255, 255, 0.1);
  --input-bg: #282828;


  /* ---------------------------------
   2. Borders
  --------------------------------- */
  --border-color-strong: rgba(255, 255, 255, 0.15);
  --border-color-medium: rgba(255, 255, 255, 0.08);
  --border-color-light: rgba(255, 255, 255, 0.03);

  --border-thickness: 1px;
  --border-thickness-bold: 1.5px;


  /* ---------------------------------
   3. Radius
  --------------------------------- */
  --radius: 8px;
  --radius-lg: 10px;
  --radius-xl: 20px;
  --radius-round: 999px;


  /* ---------------------------------
   4. Shadows
  --------------------------------- */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-hover-1: 0 2px 6px rgba(0, 0, 0, 0.4);

  --shadow-accent-weak: 0 0 6px rgba(91, 225, 255, 0);
  --shadow-accent-medium: 0 0 10px rgba(91, 225, 255, 0.6);
  --shadow-accent-strong: 0 0 12px rgba(91, 224, 255, 0.5);


  /* ---------------------------------
   5. Typography
  --------------------------------- */
  --font-family: "Inter", sans-serif;
  --font-size: 1.25rem; 
  --line-height: 1.45;


  /* ---------------------------------
   6. Sizes
  --------------------------------- */
  --size-sm: 12px;
  --size-md: 15px;
  --size-lg: 20px;
  --size-xl: 32px;
  --size-xxl: 45px;


  /* ---------------------------------
   7. Spacing Scale
  --------------------------------- */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;


  /* ---------------------------------
   8. Layout
  --------------------------------- */
  --container-max-width: 1200px;


  /* ---------------------------------
   9. Transitions
  --------------------------------- */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;


  /* ---------------------------------
   10. Z-Index System
  --------------------------------- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
}


  /* ---------------------------------
   11. Core Colors (Dark Mode)
  --------------------------------- */
.theme-dark {
  --bg: rgba(8, 25, 38, 0.95);

  --input-bg: rgba(233, 247, 230, 0.15);
  --card-bg: rgba(233, 247, 230, 0.85);
  --card-fg: rgba(0, 0, 0, 1);

  --window-close-fg: rgba(233, 247, 230, 0.85);
  --window-close-bg: rgba(0, 170, 0, 0.85);

  --fg: rgba(233, 247, 230, 0.85);
  --white: rgba(233, 247, 230, 0.85);
  --muted: rgba(122, 143, 114, 1);
  --accent: rgba(91, 225, 255, 0.83);

  --hover-bg: rgba(255, 255, 255, 0.1);
}