:root {
  /* =========================================
     Deep Sea Blue Palette
     ========================================= */
  --color-bg-deep: #0a192f;        /* Deepest Navy */
  --color-bg-card: #112240;        /* Card Background */
  --color-bg-hover: #233554;       /* Hover State */
  
  --color-text-primary: #e6f1ff;   /* Off-white for high contrast */
  --color-text-secondary: #8892b0; /* Muted blue-grey */
  
  --color-accent-primary: #64ffda; /* Electric Teal/Cyan */
  --color-accent-glow: rgba(100, 255, 218, 0.1); 

  --color-success: #64ffda;
  --color-danger: #ff6b6b;
  --color-warning: #ffd166;

  /* =========================================
     Typography
     ========================================= */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'Fira Code', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  /* =========================================
     Spacing & Layout
     ========================================= */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* =========================================
     Effects
     ========================================= */
  --shadow-card: 0 10px 30px -10px rgba(2, 12, 27, 0.7);
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
}

[data-theme="light"] {
  --color-bg-deep: #f0f2f5;        /* Light Grey Background */
  --color-bg-card: #ffffff;        /* White Card Background */
  --color-bg-hover: #e4e6eb;       /* Light Hover State */
  
  --color-text-primary: #1c1e21;   /* Dark Text for Light Mode */
  --color-text-secondary: #65676b; /* Muted Text */
  
  --color-accent-primary: #008f68; /* Darker Teal for standard text/elements */
  --color-accent-glow: rgba(0, 143, 104, 0.1); 

  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
}