@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/themes/cyberpunk-brutalism-light.css

@@ -0,0 +1,748 @@
+/*
+ * Cyberpunk Brutalism Theme - Light Mode
+ * Neon colors, glitch effects, scanlines, and futuristic aesthetics on light backgrounds
+ * 
+ * This theme overrides Carbon Design System components with cyberpunk styling
+ * WITHOUT modifying component code - it works through CSS cascade and specificity
+ */
+
+/* ============================================
+   1. COLOR PALETTE & DESIGN TOKENS OVERRIDE
+   ============================================ */
+
+body.cyberpunk-mode-light {
+  /* Cyberpunk Color Palette - Light Mode */
+  --cyber-cyan: #0088cc;
+  --cyber-magenta: #cc00cc;
+  --cyber-yellow: #cccc00;
+  --cyber-blue: #0066bb;
+  --cyber-purple: #6600bb;
+  --cyber-green: #00bb66;
+  --cyber-red: #cc0033;
+  --cyber-light: #f5f5ff;
+  --cyber-lighter: #fafafe;
+  --cyber-grid: #d0d0e8;
+
+  /* Override Carbon Design System tokens */
+  --cds-background: var(--cyber-lighter);
+  --cds-layer: var(--cyber-light);
+  --cds-layer-01: var(--cyber-light);
+  --cds-layer-02: rgba(245, 245, 255, 0.8);
+  --cds-layer-03: rgba(245, 245, 255, 0.6);
+  --cds-field: var(--cyber-light);
+  --cds-field-01: var(--cyber-light);
+  --cds-field-02: rgba(245, 245, 255, 0.8);
+
+  --cds-text-primary: var(--cyber-cyan);
+  --cds-text-secondary: rgba(0, 136, 204, 0.7);
+  --cds-text-placeholder: rgba(0, 136, 204, 0.4);
+  --cds-text-on-color: var(--cyber-lighter);
+  --cds-text-helper: rgba(0, 136, 204, 0.6);
+  --cds-text-error: var(--cyber-red);
+
+  --cds-link-primary: var(--cyber-magenta);
+  --cds-link-secondary: var(--cyber-cyan);
+
+  --cds-icon-primary: var(--cyber-cyan);
+  --cds-icon-secondary: rgba(0, 136, 204, 0.7);
+
+  --cds-border-subtle: rgba(0, 136, 204, 0.2);
+  --cds-border-strong: var(--cyber-cyan);
+  --cds-border-interactive: var(--cyber-magenta);
+
+  --cds-button-primary: var(--cyber-magenta);
+  --cds-button-secondary: var(--cyber-cyan);
+  --cds-button-tertiary: var(--cyber-purple);
+  --cds-button-danger: var(--cyber-red);
+
+  --cds-support-error: var(--cyber-red);
+  --cds-support-success: var(--cyber-green);
+  --cds-support-warning: var(--cyber-yellow);
+  --cds-support-info: var(--cyber-cyan);
+
+  /* Font override */
+  font-family: "Courier New", "Courier", monospace !important;
+}
+
+/* ============================================
+   2. BASE BODY STYLING
+   ============================================ */
+
+body.cyberpunk-mode-light {
+  background: var(--cyber-lighter) !important;
+  color: var(--cyber-cyan) !important;
+  position: relative;
+  min-height: 100vh;
+}
+
+/* Grid overlay background */
+body.cyberpunk-mode-light::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    linear-gradient(90deg, var(--cyber-grid) 1px, transparent 1px),
+    linear-gradient(0deg, var(--cyber-grid) 1px, transparent 1px);
+  background-size: 50px 50px;
+  opacity: 0.15;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ============================================
+   3. SCANLINE OVERLAY
+   ============================================ */
+
+body.cyberpunk-mode-light::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    to bottom,
+    transparent 50%,
+    rgba(0, 136, 204, 0.02) 51%
+  );
+  background-size: 100% 4px;
+  pointer-events: none;
+  z-index: 9999;
+  animation: scanlines 0.1s linear infinite;
+}
+
+@keyframes scanlines-light {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 4px;
+  }
+}
+
+/* ============================================
+   4. CARBON COMPONENT OVERRIDES
+   ============================================ */
+
+/* All Carbon containers */
+body.cyberpunk-mode-light .cds--content {
+  background: transparent !important;
+}
+body.cyberpunk-mode-light .cds--side-nav {
+  background: var(--cyber-light) !important;
+  border-right: 2px solid var(--cyber-cyan) !important;
+}
+
+/* Tiles and Cards */
+body.cyberpunk-mode-light .cds--tile,
+body.cyberpunk-mode-light .cds--structured-list,
+body.cyberpunk-mode-light .cds--data-table {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  box-shadow:
+    0 0 15px rgba(0, 136, 204, 0.2),
+    inset 0 0 15px rgba(0, 136, 204, 0.05) !important;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+body.cyberpunk-mode-light .cds--tile::before,
+body.cyberpunk-mode-light .cds--structured-list::before,
+body.cyberpunk-mode-light .cds--data-table::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 136, 204, 0.3),
+    transparent
+  );
+  transition: left 0.5s;
+  pointer-events: none;
+}
+
+body.cyberpunk-mode-light .cds--tile:hover,
+body.cyberpunk-mode-light .cds--structured-list:hover,
+body.cyberpunk-mode-light .cds--data-table:hover {
+  border-color: var(--cyber-magenta) !important;
+  box-shadow:
+    0 0 25px rgba(204, 0, 204, 0.4),
+    inset 0 0 25px rgba(204, 0, 204, 0.1) !important;
+}
+
+body.cyberpunk-mode-light .cds--tile:hover::before,
+body.cyberpunk-mode-light .cds--structured-list:hover::before,
+body.cyberpunk-mode-light .cds--data-table:hover::before {
+  left: 100%;
+}
+
+/* Buttons */
+body.cyberpunk-mode-light .cds--btn {
+  background: transparent !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+  font-family: "Courier New", "Courier", monospace !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.1em !important;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+body.cyberpunk-mode-light .cds--btn::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(0, 136, 204, 0.2);
+  transform: translate(-50%, -50%);
+  transition:
+    width 0.6s,
+    height 0.6s;
+}
+
+body.cyberpunk-mode-light .cds--btn:hover {
+  border-color: var(--cyber-magenta) !important;
+  color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 15px rgba(204, 0, 204, 0.5) !important;
+  transform: translateY(-2px);
+}
+
+body.cyberpunk-mode-light .cds--btn:hover::before {
+  width: 300px;
+  height: 300px;
+}
+
+body.cyberpunk-mode-light .cds--btn--primary {
+  border-color: var(--cyber-magenta) !important;
+  color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 8px rgba(204, 0, 204, 0.25);
+}
+
+body.cyberpunk-mode-light .cds--btn--danger {
+  border-color: var(--cyber-red) !important;
+  color: var(--cyber-red) !important;
+}
+
+/* Input Fields */
+body.cyberpunk-mode-light .cds--text-input,
+body.cyberpunk-mode-light .cds--text-area,
+body.cyberpunk-mode-light .cds--select-input,
+body.cyberpunk-mode-light .cds--dropdown {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+  font-family: "Courier New", "Courier", monospace !important;
+}
+
+body.cyberpunk-mode-light .cds--text-input:focus,
+body.cyberpunk-mode-light .cds--text-area:focus,
+body.cyberpunk-mode-light .cds--select-input:focus,
+body.cyberpunk-mode-light .cds--dropdown:focus {
+  border-color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 15px rgba(204, 0, 204, 0.4) !important;
+}
+
+body.cyberpunk-mode-light .cds--text-input::placeholder,
+body.cyberpunk-mode-light .cds--text-area::placeholder {
+  color: rgba(0, 136, 204, 0.4) !important;
+}
+
+/* Labels */
+body.cyberpunk-mode-light .cds--label,
+body.cyberpunk-mode-light .cds--form__label-text,
+body.cyberpunk-mode-light .cds--checkbox-label-text,
+body.cyberpunk-mode-light .cds--radio-button__label-text {
+  color: var(--cyber-cyan) !important;
+  font-family: "Courier New", "Courier", monospace !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+  font-size: 0.75rem !important;
+}
+
+/* Links */
+body.cyberpunk-mode-light .cds--link,
+body.cyberpunk-mode-light a {
+  color: var(--cyber-magenta) !important;
+  text-shadow: 0 0 3px rgba(204, 0, 204, 0.3);
+  transition: all 0.3s ease;
+}
+
+body.cyberpunk-mode-light .cds--link:hover,
+body.cyberpunk-mode-light a:hover {
+  color: var(--cyber-cyan) !important;
+  text-shadow: 0 0 5px rgba(0, 136, 204, 0.5);
+}
+
+/* Modals */
+body.cyberpunk-mode-light .cds--modal-container {
+  background: var(--cyber-light) !important;
+  border: 3px solid var(--cyber-cyan) !important;
+  box-shadow:
+    0 0 40px rgba(0, 136, 204, 0.4),
+    inset 0 0 40px rgba(0, 136, 204, 0.05) !important;
+}
+
+body.cyberpunk-mode-light .cds--modal-header {
+  border-bottom: 2px solid var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--modal-footer {
+  border-top: 2px solid var(--cyber-cyan) !important;
+}
+
+/* Notifications */
+body.cyberpunk-mode-light .cds--inline-notification,
+body.cyberpunk-mode-light .cds--toast-notification {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  box-shadow: 0 0 15px rgba(0, 136, 204, 0.3);
+}
+
+body.cyberpunk-mode-light .cds--inline-notification--error,
+body.cyberpunk-mode-light .cds--toast-notification--error {
+  border-color: var(--cyber-red) !important;
+  box-shadow: 0 0 15px rgba(204, 0, 51, 0.3);
+}
+
+body.cyberpunk-mode-light .cds--inline-notification--success,
+body.cyberpunk-mode-light .cds--toast-notification--success {
+  border-color: var(--cyber-green) !important;
+  box-shadow: 0 0 15px rgba(0, 187, 102, 0.3);
+}
+
+body.cyberpunk-mode-light .cds--inline-notification--warning,
+body.cyberpunk-mode-light .cds--toast-notification--warning {
+  border-color: var(--cyber-yellow) !important;
+  box-shadow: 0 0 15px rgba(204, 204, 0, 0.3);
+}
+
+/* Tables */
+body.cyberpunk-mode-light .cds--data-table thead {
+  background: var(--cyber-light) !important;
+  border-bottom: 2px solid var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--data-table tbody tr {
+  border-bottom: 1px solid rgba(0, 136, 204, 0.2) !important;
+}
+
+body.cyberpunk-mode-light .cds--data-table tbody tr:hover {
+  background: rgba(0, 136, 204, 0.08) !important;
+  box-shadow: inset 0 0 15px rgba(0, 136, 204, 0.15);
+}
+
+body.cyberpunk-mode-light .cds--data-table th,
+body.cyberpunk-mode-light .cds--data-table td {
+  color: var(--cyber-cyan) !important;
+  border-color: rgba(0, 136, 204, 0.2) !important;
+}
+
+/* Tabs */
+body.cyberpunk-mode-light .cds--tabs {
+  border-bottom: 2px solid var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--tabs__nav-link {
+  color: var(--cyber-cyan) !important;
+  border-bottom: 2px solid transparent !important;
+}
+
+body.cyberpunk-mode-light .cds--tabs__nav-link:hover {
+  color: var(--cyber-magenta) !important;
+  border-bottom-color: var(--cyber-magenta) !important;
+}
+
+body.cyberpunk-mode-light .cds--tabs__nav-item--selected .cds--tabs__nav-link {
+  border-bottom-color: var(--cyber-magenta) !important;
+  color: var(--cyber-magenta) !important;
+  text-shadow: 0 0 5px rgba(204, 0, 204, 0.5);
+}
+
+/* Accordion */
+body.cyberpunk-mode-light .cds--accordion__item {
+  border-top: 1px solid rgba(0, 136, 204, 0.2) !important;
+}
+
+body.cyberpunk-mode-light .cds--accordion__heading {
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--accordion__heading:hover {
+  background: rgba(0, 136, 204, 0.08) !important;
+}
+
+/* Toggles and Checkboxes */
+body.cyberpunk-mode-light .cds--toggle__switch {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--toggle__switch::before {
+  background: var(--cyber-cyan) !important;
+  box-shadow: 0 0 8px rgba(0, 136, 204, 0.6);
+}
+
+body.cyberpunk-mode-light
+  .cds--toggle:checked
+  + .cds--toggle__label
+  .cds--toggle__switch {
+  background: var(--cyber-magenta) !important;
+  box-shadow: 0 0 15px rgba(204, 0, 204, 0.5);
+}
+
+body.cyberpunk-mode-light
+  .cds--checkbox:checked
+  + .cds--checkbox-label::before {
+  background: var(--cyber-magenta) !important;
+  border-color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 10px rgba(204, 0, 204, 0.5);
+}
+
+body.cyberpunk-mode-light
+  .cds--radio-button:checked
+  + .cds--radio-button__label::before {
+  border-color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 10px rgba(204, 0, 204, 0.5);
+}
+
+body.cyberpunk-mode-light
+  .cds--radio-button:checked
+  + .cds--radio-button__label::after {
+  background: var(--cyber-magenta) !important;
+}
+
+/* Progress Bar */
+body.cyberpunk-mode-light .cds--progress-bar {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--progress-bar__bar {
+  background: var(--cyber-cyan) !important;
+  box-shadow: 0 0 15px rgba(0, 136, 204, 0.6);
+}
+
+/* Loading */
+body.cyberpunk-mode-light .cds--loading__svg circle {
+  stroke: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--loading-overlay {
+  background: rgba(250, 250, 254, 0.9) !important;
+}
+
+/* Tags */
+body.cyberpunk-mode-light .cds--tag {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--tag--red {
+  border-color: var(--cyber-red) !important;
+  color: var(--cyber-red) !important;
+}
+
+body.cyberpunk-mode-light .cds--tag--magenta {
+  border-color: var(--cyber-magenta) !important;
+  color: var(--cyber-magenta) !important;
+}
+
+body.cyberpunk-mode-light .cds--tag--purple {
+  border-color: var(--cyber-purple) !important;
+  color: var(--cyber-purple) !important;
+}
+
+body.cyberpunk-mode-light .cds--tag--blue {
+  border-color: var(--cyber-blue) !important;
+  color: var(--cyber-blue) !important;
+}
+
+body.cyberpunk-mode-light .cds--tag--cyan {
+  border-color: var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--tag--teal {
+  border-color: var(--cyber-green) !important;
+  color: var(--cyber-green) !important;
+}
+
+body.cyberpunk-mode-light .cds--tag--green {
+  border-color: var(--cyber-green) !important;
+  color: var(--cyber-green) !important;
+}
+
+/* Breadcrumbs */
+body.cyberpunk-mode-light .cds--breadcrumb-item::after {
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--breadcrumb-item .cds--link {
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--breadcrumb-item .cds--link:hover {
+  color: var(--cyber-magenta) !important;
+}
+
+/* Tooltips */
+body.cyberpunk-mode-light .cds--tooltip-content {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+  box-shadow: 0 0 15px rgba(0, 136, 204, 0.4);
+}
+
+body.cyberpunk-mode-light .cds--tooltip-caret {
+  background: var(--cyber-cyan) !important;
+}
+
+/* Overflow Menu */
+body.cyberpunk-mode-light .cds--overflow-menu-options {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  box-shadow: 0 0 20px rgba(0, 136, 204, 0.4);
+}
+
+body.cyberpunk-mode-light .cds--overflow-menu-options__option:hover {
+  background: rgba(0, 136, 204, 0.1) !important;
+}
+
+/* Dropdown */
+body.cyberpunk-mode-light .cds--dropdown__wrapper,
+body.cyberpunk-mode-light .cds--list-box__menu {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  box-shadow: 0 0 15px rgba(0, 136, 204, 0.3);
+}
+
+body.cyberpunk-mode-light .cds--list-box__menu-item:hover {
+  background: rgba(0, 136, 204, 0.1) !important;
+}
+
+body.cyberpunk-mode-light .cds--list-box__menu-item--highlighted {
+  background: rgba(0, 136, 204, 0.15) !important;
+}
+
+/* Search */
+body.cyberpunk-mode-light .cds--search-input {
+  background: var(--cyber-light) !important;
+  border: 2px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--search-input:focus {
+  border-color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 15px rgba(204, 0, 204, 0.4) !important;
+}
+
+/* Pagination */
+body.cyberpunk-mode-light .cds--pagination__button {
+  border: 2px solid var(--cyber-cyan) !important;
+  color: var(--cyber-cyan) !important;
+}
+
+body.cyberpunk-mode-light .cds--pagination__button:hover {
+  border-color: var(--cyber-magenta) !important;
+  color: var(--cyber-magenta) !important;
+  box-shadow: 0 0 10px rgba(204, 0, 204, 0.4);
+}
+
+/* ============================================
+   5. HEADING EFFECTS
+   ============================================ */
+
+body.cyberpunk-mode-light h1,
+body.cyberpunk-mode-light h2,
+body.cyberpunk-mode-light h3,
+body.cyberpunk-mode-light h4 {
+  position: relative;
+  color: var(--cyber-magenta) !important;
+  font-family: "Courier New", "Courier", monospace !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.1em !important;
+  animation:
+    glitch-skew-light 1s infinite,
+    glitch-text-shadow-light 0.5s infinite;
+}
+
+/* Intensified glitch skew animation */
+@keyframes glitch-skew-light {
+  0% {
+    transform: skewX(0deg);
+  }
+  10% {
+    transform: skewX(2deg);
+  }
+  20% {
+    transform: skewX(-2deg);
+  }
+  30% {
+    transform: skewX(0deg);
+  }
+  40% {
+    transform: skewX(1deg);
+  }
+  50% {
+    transform: skewX(-1deg);
+  }
+  60% {
+    transform: skewX(0deg);
+  }
+  70% {
+    transform: skewX(3deg);
+  }
+  80% {
+    transform: skewX(-3deg);
+  }
+  90% {
+    transform: skewX(0deg);
+  }
+  100% {
+    transform: skewX(0deg);
+  }
+}
+
+/* RGB channel split text-shadow animation for light mode */
+@keyframes glitch-text-shadow-light {
+  0% {
+    text-shadow:
+      0 0 5px rgba(204, 0, 204, 0.4),
+      0 0 10px rgba(204, 0, 204, 0.3);
+  }
+  10% {
+    text-shadow:
+      -3px 0 var(--cyber-magenta),
+      3px 0 var(--cyber-cyan),
+      0 0 5px rgba(204, 0, 204, 0.4);
+  }
+  20% {
+    text-shadow:
+      3px 0 var(--cyber-magenta),
+      -3px 0 var(--cyber-cyan),
+      0 0 5px rgba(204, 0, 204, 0.4);
+  }
+  30% {
+    text-shadow:
+      0 0 5px rgba(204, 0, 204, 0.4),
+      0 0 10px rgba(204, 0, 204, 0.3);
+  }
+  40% {
+    text-shadow:
+      -2px 0 var(--cyber-magenta),
+      2px 0 var(--cyber-cyan),
+      0 0 5px rgba(204, 0, 204, 0.4);
+  }
+  50% {
+    text-shadow:
+      2px 0 var(--cyber-magenta),
+      -2px 0 var(--cyber-cyan),
+      0 0 5px rgba(204, 0, 204, 0.4);
+  }
+  60% {
+    text-shadow:
+      0 0 5px rgba(204, 0, 204, 0.4),
+      0 0 10px rgba(204, 0, 204, 0.3);
+  }
+  70% {
+    text-shadow:
+      -4px 0 var(--cyber-magenta),
+      4px 0 var(--cyber-cyan),
+      0 0 8px rgba(204, 0, 204, 0.6);
+  }
+  80% {
+    text-shadow:
+      4px 0 var(--cyber-magenta),
+      -4px 0 var(--cyber-cyan),
+      0 0 8px rgba(204, 0, 204, 0.6);
+  }
+  90% {
+    text-shadow:
+      0 0 5px rgba(204, 0, 204, 0.4),
+      0 0 10px rgba(204, 0, 204, 0.3);
+  }
+  100% {
+    text-shadow:
+      0 0 5px rgba(204, 0, 204, 0.4),
+      0 0 10px rgba(204, 0, 204, 0.3);
+  }
+}
+
+/* Pulse glow animation for light mode */
+@keyframes pulse-glow-light {
+  0%,
+  100% {
+    opacity: 1;
+    filter: drop-shadow(0 0 3px var(--cyber-cyan));
+  }
+  50% {
+    opacity: 0.8;
+    filter: drop-shadow(0 0 10px var(--cyber-magenta));
+  }
+}
+
+body.cyberpunk-mode-light .pulse-glow {
+  animation: pulse-glow-light 2s ease-in-out infinite;
+}
+
+/* ============================================
+   6. SCROLLBAR STYLING
+   ============================================ */
+
+body.cyberpunk-mode-light ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+body.cyberpunk-mode-light ::-webkit-scrollbar-track {
+  background: var(--cyber-light);
+  border: 1px solid var(--cyber-cyan);
+}
+
+body.cyberpunk-mode-light ::-webkit-scrollbar-thumb {
+  background: var(--cyber-cyan);
+  border: 2px solid var(--cyber-light);
+  box-shadow: 0 0 10px rgba(0, 136, 204, 0.6);
+}
+
+body.cyberpunk-mode-light ::-webkit-scrollbar-thumb:hover {
+  background: var(--cyber-magenta);
+  box-shadow: 0 0 15px rgba(204, 0, 204, 0.8);
+}
+
+/* Firefox scrollbar */
+body.cyberpunk-mode-light * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--cyber-cyan) var(--cyber-light);
+}
+
+/* ============================================
+   7. PRINT STYLES
+   ============================================ */
+
+@media print {
+  body.cyberpunk-mode-light,
+  body.cyberpunk-mode-light *,
+  body.cyberpunk-mode-light::before,
+  body.cyberpunk-mode-light::after {
+    background: white !important;
+    color: black !important;
+    border-color: black !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+    animation: none !important;
+    font-family: inherit !important;
+  }
+}