## MODIFIED Requirements

### Requirement: Matrix-style color scheme
The application SHALL use a dark background with neon green (#00ff41) accent color scheme in dark mode and a light background with muted green accents in light mode.

#### Scenario: Dark mode background colors
- **WHEN** rendering main layout in dark mode
- **THEN** page background is #0a0e0a (near black), sidebar background is #0d110d, and chart background is #000000

#### Scenario: Dark mode primary accent color
- **WHEN** highlighting interactive elements in dark mode
- **THEN** uses #00ff41 (matrix green) as the primary accent color

#### Scenario: Dark mode secondary accent colors
- **WHEN** rendering labels or status indicators in dark mode
- **THEN** uses #ff0040 (neon red) for break_down/destructive, #00ff41 (neon green) for break_up/success, #00d4ff (neon cyan) for informational, #ffff00 (neon yellow) for warnings

#### Scenario: Dark mode text colors
- **WHEN** rendering text in dark mode
- **THEN** primary text is #00ff41, secondary text is #00cc33, and disabled text is #003311

#### Scenario: Dark mode border colors
- **WHEN** rendering borders in dark mode
- **THEN** uses #00ff41 with 1px solid for active elements, #003311 for inactive borders

#### Scenario: Light mode background colors
- **WHEN** rendering main layout in light mode
- **THEN** page background is #f8faf8 (off-white with green tint), sidebar background is #f0f4f0, and chart background is #ffffff

#### Scenario: Light mode primary accent color
- **WHEN** highlighting interactive elements in light mode
- **THEN** uses #16a34a (green-600) as the primary accent color

#### Scenario: Light mode text colors
- **WHEN** rendering text in light mode
- **THEN** primary text is #1a1a2e (near-black), secondary text is #4a5568 (gray-600), and disabled text is #a0aec0 (gray-400)

#### Scenario: Light mode border colors
- **WHEN** rendering borders in light mode
- **THEN** uses #d1d5db (gray-300) for borders, #16a34a for active element borders

### Requirement: Neon glow effects
The application SHALL apply glow effects to active and interactive elements in dark mode only.

#### Scenario: Button hover glow in dark mode
- **WHEN** user hovers over any button in dark mode
- **THEN** button shows box-shadow: 0 0 10px #00ff41, 0 0 20px #00ff4180

#### Scenario: No glow in light mode
- **WHEN** user hovers over any button in light mode
- **THEN** button shows standard hover state (subtle background change) without neon glow effects

#### Scenario: Active tool glow in dark mode
- **WHEN** a tool is active (selected) in dark mode
- **THEN** button shows pulsing glow animation

#### Scenario: Active tool highlight in light mode
- **WHEN** a tool is active (selected) in light mode
- **THEN** button shows solid green background/border highlight without glow animation

### Requirement: Responsive dark theme
The application SHALL maintain theme consistency across all components and states in both dark and light modes.

#### Scenario: Modal dialogs in dark mode
- **WHEN** displaying confirmation dialogs in dark mode
- **THEN** modal has dark background (#0d110d), neon green border, monospace font

#### Scenario: Modal dialogs in light mode
- **WHEN** displaying confirmation dialogs in light mode
- **THEN** modal has white background, gray border, monospace font

#### Scenario: Input fields in dark mode
- **WHEN** rendering text inputs in dark mode
- **THEN** inputs have transparent background, #00ff41 border, #00ff41 text

#### Scenario: Input fields in light mode
- **WHEN** rendering text inputs in light mode
- **THEN** inputs have white background, gray-300 border, near-black text

#### Scenario: Scrollbars in dark mode
- **WHEN** content requires scrolling in dark mode
- **THEN** scrollbar track is #003311, thumb is #00ff41

#### Scenario: Scrollbars in light mode
- **WHEN** content requires scrolling in light mode
- **THEN** scrollbar track is #e2e8f0, thumb is #94a3b8

### Requirement: Tailwind CSS configuration
The Tailwind config SHALL support theme tokens for both dark and light modes via CSS variables.

#### Scenario: CSS variables for dark mode
- **WHEN** the `dark` class is on `<html>`
- **THEN** CSS variables resolve to hacker-theme dark palette values

#### Scenario: CSS variables for light mode
- **WHEN** the `dark` class is NOT on `<html>`
- **THEN** CSS variables resolve to light theme palette values

### Requirement: globals.css updates
The globals.css file SHALL define CSS variables for both light and dark themes.

#### Scenario: Light mode CSS variables
- **WHEN** globals.css is loaded without `dark` class
- **THEN** `:root` defines light theme color variables

#### Scenario: Dark mode CSS variables
- **WHEN** globals.css is loaded with `dark` class on `<html>`
- **THEN** `.dark` selector overrides with hacker-theme dark palette variables

## ADDED Requirements

### Requirement: Cyber-retro effects dark-mode only
The application SHALL only apply CRT scanline effects, noise textures, and flicker animations in dark mode.

#### Scenario: Scanlines in dark mode
- **WHEN** rendering main container in dark mode
- **THEN** applies subtle CRT scanline overlay at 5% opacity

#### Scenario: No scanlines in light mode
- **WHEN** rendering main container in light mode
- **THEN** no scanline or CRT effects are applied