@shohojdhara/atomix 0.2.4 → 0.2.6

package/src/styles/06-components/_components.chart.scss

@@ -31,94 +31,80 @@
   border: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}chart-border-color);
   border-radius: var(--#{$prefix}chart-border-radius);
   overflow: hidden;
-  box-shadow: $box-shadow-sm;
+  box-shadow: 
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24),
+    0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.05);
   position: relative;
   min-height: var(--#{$prefix}chart-min-height);
   width: 100%;
   max-width: 100%;
-  @include dynamic-background(var(--#{$prefix}chart-bg));
-  @include basic-transition();
+  background: var(--#{$prefix}chart-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 
+  // Modern gradient overlay with glass morphism
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: 
+      linear-gradient(
+        135deg,
+        rgba(var(--#{$prefix}primary-rgb), 0.08) 0%,
+        transparent 40%,
+        transparent 60%,
+        rgba(var(--#{$prefix}secondary-rgb), 0.04) 100%
+      ),
+      radial-gradient(
+        circle at 20% 20%,
+        rgba(var(--#{$prefix}primary-rgb), 0.06) 0%,
+        transparent 50%
+      ),
+      radial-gradient(
+        circle at 80% 80%,
+        rgba(var(--#{$prefix}secondary-rgb), 0.04) 0%,
+        transparent 50%
+      );
+    pointer-events: none;
+    z-index: 1;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+  }
+
+  // Subtle border glow effect
   &::after {
     content: '';
     position: absolute;
     inset: 0;
+    border-radius: inherit;
+    padding: 1px;
     background: linear-gradient(
       135deg,
-      rgba(var(--#{$prefix}primary-rgb), 0.1) 0%,
-      transparent 50%,
-      rgba(var(--#{$prefix}secondary-rgb), 0.05) 100%
+      rgba(var(--#{$prefix}primary-rgb), 0.1),
+      rgba(var(--#{$prefix}secondary-rgb), 0.05),
+      transparent
     );
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
     pointer-events: none;
-    z-index: 1;
+    z-index: 2;
+    opacity: 0;
+    transition: opacity 0.3s ease;
   }
 
   &:hover {
-    box-shadow: $box-shadow-lg;
-    border-color: var(--#{$prefix}primary-border-subtle);
-  }
-
-  &:focus-visible {
-    box-shadow:
-      $box-shadow-md,
-      0 0 0 $chart-focus-ring-width var(--#{$prefix}primary-border-subtle);
-  }
-
-  &--xs {
-    --#{$prefix}chart-min-height: #{$chart-min-height-xs};
-    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 2)};
-    font-size: $font-size-xs;
-  }
-
-  &--sm {
-    --#{$prefix}chart-min-height: #{$chart-min-height-sm};
-    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 3)};
-    font-size: $font-size-sm;
-  }
-
-  &--md {
-    --#{$prefix}chart-min-height: #{$chart-min-height-md};
-    --#{$prefix}chart-padding: #{$chart-padding};
-    font-size: $font-size-base;
-  }
-
-  &--lg {
-    --#{$prefix}chart-min-height: #{$chart-min-height-lg};
-    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 6)};
-    font-size: $font-size-md;
-  }
-
-  &--xl {
-    --#{$prefix}chart-min-height: #{$chart-min-height-xl};
-    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 8)};
-    font-size: $font-size-lg;
-  }
-
-  &--2xl {
-    --#{$prefix}chart-min-height: #{$chart-min-height-2xl};
-    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 10)};
-    font-size: $font-size-lg;
-  }
-
-  &--full {
-    height: 100vh;
-    min-height: auto;
-    border-radius: 0;
-  }
-
-  &--auto {
-    height: auto;
-    min-height: $chart-canvas-min-height;
-  }
-
-  @each $color, $value in color-maps.$theme-colors {
-    &--#{$color} {
-      --#{$prefix}chart-primary-color: var(--#{$prefix}#{$color}-6);
-      --#{$prefix}chart-border-color: var(--#{$prefix}#{$color}-border-subtle);
+    box-shadow: 
+      0 8px 24px rgba(0, 0, 0, 0.12),
+      0 4px 8px rgba(0, 0, 0, 0.16),
+      0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
+      0 0 40px rgba(var(--#{$prefix}primary-rgb), 0.08);
+    border-color: rgba(var(--#{$prefix}primary-rgb), 0.2);
 
-      &:hover {
-        border-color: var(--#{$prefix}#{$color}-border-subtle);
-      }
+    &::after {
+      opacity: 1;
     }
   }
 
@@ -145,82 +131,101 @@
     }
   }
 
-  &--interactive {
-    cursor: pointer;
-    user-select: none;
+  &--fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    border-radius: 0;
+    box-shadow: none;
+    background: var(--#{$prefix}body-bg);
+  }
+  &--elevated {
+    box-shadow: 
+      0 12px 32px rgba(0, 0, 0, 0.15),
+      0 6px 12px rgba(0, 0, 0, 0.2),
+      0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
+      0 0 60px rgba(var(--#{$prefix}primary-rgb), 0.12);
 
     &:hover {
-      transform: translateY(-2px);
-      box-shadow: $box-shadow-xl;
-    }
-
-    &:active {
-      transform: $chart-active-transform;
-      box-shadow: $box-shadow-md;
-      transition-duration: 0.1s;
-    }
-
-    &:focus-visible {
-      transform: translateY(-1px);
+      box-shadow: 
+        0 16px 40px rgba(0, 0, 0, 0.18),
+        0 8px 16px rgba(0, 0, 0, 0.24),
+        0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.15),
+        0 0 80px rgba(var(--#{$prefix}primary-rgb), 0.16);
     }
   }
 
-  &--disabled {
-    pointer-events: none;
-    opacity: 0.6;
+  &--glass {
+    // Glass variant specific styles
+    // Background and borders are handled by AtomixGlass
+    background: transparent;
+    border: none;
+    box-shadow: none;
 
+    // Ensure content is visible through glass
     #{$root}__content {
-      filter: grayscale(80%) opacity(0.6);
+      position: relative;
     }
 
     #{$root}__canvas {
-      pointer-events: none;
+      position: relative;
     }
 
-    &:hover {
-      transform: none;
-      box-shadow: $box-shadow-sm;
+    // Toolbar should remain visible
+    #{$root}__toolbar {
+      position: relative;
     }
   }
 
-  &--fullscreen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 9999;
-    border-radius: 0;
-    box-shadow: none;
-    background: var(--#{$prefix}primary-bg-default);
+  // State Modifiers
+  // =============================================================================
+  &--disabled {
+    @include component-disabled;
+    pointer-events: none;
+    opacity: 0.6;
   }
 
-  &--elevated {
-    box-shadow: $box-shadow-lg;
-    transform: translateY(-2px);
+  &--selected {
+    border-color: rgba(var(--#{$prefix}primary-rgb), 0.3);
+    box-shadow: 
+      0 4px 16px rgba(0, 0, 0, 0.1),
+      0 2px 4px rgba(0, 0, 0, 0.12),
+      0 0 0 2px rgba(var(--#{$prefix}primary-rgb), 0.2),
+      0 0 30px rgba(var(--#{$prefix}primary-rgb), 0.15);
+    background: 
+      linear-gradient(
+        135deg,
+        rgba(var(--#{$prefix}primary-rgb), 0.08) 0%,
+        rgba(var(--#{$prefix}primary-rgb), 0.04) 100%
+      ),
+      var(--#{$prefix}chart-bg);
+  }
 
-    &:hover {
-      box-shadow: $box-shadow-xl;
-      transform: translateY(-4px);
-    }
+  &--active {
+    border-color: var(--#{$prefix}primary-border-subtle);
+    box-shadow: $box-shadow-md;
   }
 
-  &--flat {
-    box-shadow: none;
-    border: 2px solid var(--#{$prefix}primary-border-subtle);
+  &--clickable {
+    cursor: pointer;
 
     &:hover {
-      box-shadow: $box-shadow-sm;
-      transform: none;
+      box-shadow: 
+        0 8px 24px rgba(0, 0, 0, 0.12),
+        0 4px 8px rgba(0, 0, 0, 0.16),
+        0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.1),
+        0 0 40px rgba(var(--#{$prefix}primary-rgb), 0.08);
+      border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
     }
-  }
-
-  &--rounded {
-    border-radius: $border-radius-xl;
-  }
 
-  &--square {
-    border-radius: 0;
+    &:active {
+      box-shadow: 
+        0 2px 8px rgba(0, 0, 0, 0.1),
+        0 1px 2px rgba(0, 0, 0, 0.12);
+    }
   }
 
   &__header {
@@ -298,8 +303,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: rem(32px);
-    height: rem(32px);
+    width: map.get($spacing-sizes, 8);
+    height: map.get($spacing-sizes, 8);
     border-radius: $border-radius-sm;
     border: 1px solid transparent;
     background-color: transparent;
@@ -308,7 +313,7 @@
     transition: all $chart-transition-duration $chart-transition-timing;
     position: relative;
     overflow: hidden;
-    font-size: rem(14px);
+    font-size: map.get($spacing-sizes, 3.5);
 
     &::before {
       content: '';
@@ -323,8 +328,8 @@
     svg {
       position: relative;
       z-index: 1;
-      width: rem(16px);
-      height: rem(16px);
+      width: map.get($spacing-sizes, 4);
+      height: map.get($spacing-sizes, 4);
       transition: transform $chart-transition-duration $chart-transition-timing;
     }
 
@@ -344,9 +349,9 @@
       }
     }
 
+    @include focus-ring;
+
     &:focus-visible {
-      outline: 2px solid var(--#{$prefix}primary-6);
-      outline-offset: 2px;
       border-color: var(--#{$prefix}primary-border-subtle);
     }
 
@@ -377,55 +382,6 @@
         border-color: transparent;
       }
     }
-
-    // Variant styles
-    &--primary {
-      background-color: var(--#{$prefix}primary-6);
-      color: white;
-      border-color: var(--#{$prefix}primary-6);
-
-      &:hover {
-        background-color: var(--#{$prefix}primary-7);
-        border-color: var(--#{$prefix}primary-7);
-      }
-
-      &:active {
-        background-color: var(--#{$prefix}primary-8);
-      }
-    }
-
-    &--success {
-      background-color: var(--#{$prefix}success-6);
-      color: white;
-      border-color: var(--#{$prefix}success-6);
-
-      &:hover {
-        background-color: var(--#{$prefix}success-7);
-        border-color: var(--#{$prefix}success-7);
-      }
-    }
-
-    &--warning {
-      background-color: var(--#{$prefix}warning-6);
-      color: white;
-      border-color: var(--#{$prefix}warning-6);
-
-      &:hover {
-        background-color: var(--#{$prefix}warning-7);
-        border-color: var(--#{$prefix}warning-7);
-      }
-    }
-
-    &--danger {
-      background-color: var(--#{$prefix}error-6);
-      color: white;
-      border-color: var(--#{$prefix}error-6);
-
-      &:hover {
-        background-color: var(--#{$prefix}error-7);
-        border-color: var(--#{$prefix}error-7);
-      }
-    }
   }
 
   &__export-group {
@@ -453,7 +409,7 @@
     border-radius: $border-radius-md;
     box-shadow: $box-shadow-lg;
     padding: map.get($spacing-sizes, 1);
-    min-width: rem(120px);
+    min-width: calc(map.get($spacing-sizes, 7) * 4);
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
@@ -469,7 +425,7 @@
     border: none;
     background: transparent;
     color: var(--#{$prefix}primary-text-emphasis);
-    font-size: rem(12px);
+    font-size: map.get($spacing-sizes, 3);
     font-weight: $font-weight-medium;
     text-align: left;
     border-radius: $border-radius-sm;
@@ -484,8 +440,8 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--#{$prefix}primary-6);
-      outline-offset: -2px;
+      outline: calc(var(--#{$prefix}border-width) * 2) solid var(--#{$prefix}primary-6);
+      outline-offset: calc(var(--#{$prefix}border-width) * -2);
     }
 
     &:disabled {
@@ -499,6 +455,116 @@
     }
   }
 
+  &__settings-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: map.get($spacing-sizes, 1);
+    background: var(--#{$prefix}primary-bg-default);
+    border: 1px solid var(--#{$prefix}primary-border-subtle);
+    border-radius: $border-radius-md;
+    box-shadow: $box-shadow-lg;
+    padding: map.get($spacing-sizes, 2);
+    min-width: calc(map.get($spacing-sizes, 7) * 5);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: all $chart-transition-duration $chart-transition-timing;
+    backdrop-filter: blur(8px);
+
+    &-title {
+      font-size: $font-size-sm;
+      font-weight: $font-weight-semibold;
+      color: var(--#{$prefix}text-primary);
+      margin-bottom: map.get($spacing-sizes, 2);
+      padding-bottom: map.get($spacing-sizes, 2);
+      border-bottom: 1px solid var(--#{$prefix}border-color);
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      gap: map.get($spacing-sizes, 1);
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: map.get($spacing-sizes, 1.5) 0;
+      gap: map.get($spacing-sizes, 3);
+
+      &--info {
+        opacity: 0.7;
+        font-size: $font-size-xs;
+      }
+    }
+
+    &-toggle {
+      display: flex;
+      align-items: center;
+      gap: map.get($spacing-sizes, 2);
+      cursor: pointer;
+      width: 100%;
+      user-select: none;
+
+      input[type='checkbox'] {
+        width: map.get($spacing-sizes, 4);
+        height: map.get($spacing-sizes, 4);
+        cursor: pointer;
+        accent-color: var(--#{$prefix}primary);
+        flex-shrink: 0;
+      }
+    }
+
+    &-label {
+      font-size: $font-size-xs;
+      font-weight: $font-weight-medium;
+      color: var(--#{$prefix}text-primary);
+      flex: 1;
+    }
+
+    &-value {
+      font-size: $font-size-xs;
+      font-weight: $font-weight-semibold;
+      color: var(--#{$prefix}secondary-text-emphasis);
+      text-transform: capitalize;
+    }
+  }
+
+  &__toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: map.get($spacing-sizes, 2);
+    position: relative;
+
+    &:hover {
+      #{$root}__export-dropdown,
+      #{$root}__settings-menu {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+    }
+  }
+
+  &__toolbar-separator {
+    width: 1px;
+    height: map.get($spacing-sizes, 6);
+    background: var(--#{$prefix}border-color);
+    margin: 0 map.get($spacing-sizes, 2);
+  }
+
+  &__toolbar-label {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    color: var(--#{$prefix}secondary-text-emphasis);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-right: map.get($spacing-sizes, 2);
+  }
+
   &__content {
     flex: 1;
     position: relative;
@@ -507,7 +573,11 @@
     align-items: center;
     justify-content: center;
     min-height: $chart-canvas-min-height;
+    z-index: 3;
+    contain: layout;
+    overflow: hidden;
 
+    // Subtle dot pattern background
     &::before {
       content: '';
       position: absolute;
@@ -517,25 +587,28 @@
       bottom: 0;
       background-image: radial-gradient(
         circle at 1px 1px,
-        var(--#{$prefix}primary-border-subtle) 1px,
+        rgba(var(--#{$prefix}primary-rgb), 0.08) 1px,
         transparent 0
       );
-      background-size: $chart-pattern-size $chart-pattern-size;
-      opacity: $chart-pattern-opacity;
+      background-size: 16px 16px;
+      opacity: 0.4;
       pointer-events: none;
       z-index: 0;
     }
 
+    // Modern gradient overlay
     &::after {
       content: '';
       position: absolute;
       inset: 0;
-      background: linear-gradient(
-        135deg,
-        rgba(255, 255, 255, 0.02) 0%,
-        transparent 50%,
-        rgba(0, 0, 0, 0.02) 100%
-      );
+      background: 
+        linear-gradient(
+          180deg,
+          rgba(var(--#{$prefix}primary-rgb), 0.03) 0%,
+          transparent 30%,
+          transparent 70%,
+          rgba(var(--#{$prefix}secondary-rgb), 0.02) 100%
+        );
       pointer-events: none;
       z-index: 1;
     }
@@ -548,212 +621,69 @@
     overflow: hidden;
     border-radius: $border-radius-sm;
     z-index: 2;
+    background: transparent;
+    min-height: 200px;
+    contain: layout style paint;
 
     svg {
-      width: 100%;
-      height: 100%;
+      display: block;
       shape-rendering: geometricPrecision;
       text-rendering: optimizeLegibility;
       image-rendering: -webkit-optimize-contrast;
       image-rendering: crisp-edges;
+      will-change: contents;
+      backface-visibility: hidden;
+      transform: translateZ(0);
+      opacity: 0;
+      animation: chart-fade-in 0.3s ease-out forwards;
+    }
+
+    // Chart fade-in animation
+    @keyframes chart-fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
     }
 
     canvas {
       width: 100%;
       height: 100%;
+      display: block;
       image-rendering: -webkit-optimize-contrast;
       image-rendering: crisp-edges;
     }
   }
 
-  // Enhanced interactive features
-  &__crosshair {
+  &__tooltip {
+    position: fixed;
+    backdrop-filter: blur($chart-tooltip-backdrop-blur);
+    border-radius: $chart-tooltip-border-radius;
+    padding: $chart-tooltip-padding-y $chart-tooltip-padding-x;
+    box-shadow: var(--atomix-box-shadow);
+    font-size: $chart-tooltip-font-size;
+    color: $chart-primary-text;
     pointer-events: none;
+    z-index: 1070;
+    max-width: $chart-tooltip-max-width;
+    min-width: $chart-tooltip-min-width;
+    // background: $chart-primary-bg;
+    border: 1px solid $chart-primary-border;
+    opacity: 1;
 
-    line,
-    &-line {
-      stroke: $chart-primary-border;
-      stroke-width: 1;
-      stroke-dasharray: 4, 4;
-      opacity: 0.7;
+    &-title {
+      font-weight: $font-weight-bold;
+      margin-bottom: map.get($spacing-sizes, 2);
+      color: $chart-primary-text;
+      font-size: $font-size-sm;
+    }
 
-      &--vertical,
-      &--horizontal {
-        opacity: 0.7;
-      }
-    }
-  }
-
-  &__zoom-indicator {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: rgba(0, 0, 0, 0.8);
-    color: white;
-    padding: 4px 8px;
-    border-radius: $border-radius-sm;
-    font-size: $font-size-xs;
-    font-weight: $font-weight-medium;
-    pointer-events: none;
-    z-index: 10;
-  }
-
-  &__navigator {
-    opacity: 0.8;
-
-    rect {
-      fill: rgba(0, 0, 0, 0.05);
-      stroke: var(--#{$prefix}gray-3);
-      stroke-width: 1;
-    }
-
-    path {
-      stroke-width: 1;
-      fill: none;
-      opacity: 0.6;
-    }
-  }
-
-  &__real-time-indicator {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    background: var(--#{$prefix}success-bg-subtle);
-    color: var(--#{$prefix}success-text-emphasis);
-    padding: 4px 8px;
-    border-radius: $border-radius-sm;
-    font-size: $font-size-xs;
-    font-weight: $font-weight-medium;
-    border: 1px solid var(--#{$prefix}success-border-subtle);
-
-    &::before {
-      content: '';
-      width: 6px;
-      height: 6px;
-      background: var(--#{$prefix}success-6);
-      border-radius: 50%;
-      animation: chart-pulse-dot 2s ease-in-out infinite;
-    }
-  }
-
-  &__legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: $chart-legend-spacer;
-    padding: var(--#{$prefix}chart-padding);
-    border-top: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}brand-border-subtle);
-    z-index: 2;
-  }
-
-  &__legend-item {
-    display: flex;
-    align-items: center;
-    gap: $chart-legend-item-spacer;
-    cursor: pointer;
-    padding: map.get($spacing-sizes, 2) map.get($spacing-sizes, 3);
-    border-radius: $border-radius-md;
-    border: var(--#{$prefix}chart-border-width) solid transparent;
-    background-color: transparent;
-    transition: all $chart-transition-duration $chart-transition-timing;
-    user-select: none;
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: var(--#{$prefix}secondary-bg-subtle);
-      opacity: 0;
-      transition: opacity $chart-transition-duration $chart-transition-timing;
-    }
-
-    &:hover {
-      background-color: var(--#{$prefix}secondary-bg-subtle);
-      border-color: var(--#{$prefix}primary-border-subtle);
-      transform: translateY(-1px);
-      box-shadow: $box-shadow-sm;
-
-      &::before {
-        opacity: 1;
-      }
-    }
-
-    &:focus-visible {
-      @include focus-ring;
-    }
-
-    &:active {
-      transform: translateY(0);
-    }
-
-    &[data-visible='false'] {
-      opacity: 0.4;
-      filter: grayscale(60%);
-
-      #{$root}__legend-label {
-        text-decoration: line-through;
-      }
-
-      #{$root}__legend-color {
-        opacity: 0.3;
-        filter: grayscale(100%);
-      }
-    }
-  }
-
-  &__legend-color {
-    width: $chart-legend-color-size;
-    height: $chart-legend-color-size;
-    border-radius: $border-radius-sm;
-    border: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}primary-border-subtle);
-    flex-shrink: 0;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    transition: all $chart-transition-duration $chart-transition-timing;
-    position: relative;
-  }
-
-  &__legend-label {
-    color: var(--#{$prefix}primary-text-emphasis);
-    font-weight: $font-weight-medium;
-    letter-spacing: -0.01em;
-    transition: color $chart-transition-duration $chart-transition-timing;
-    position: relative;
-    z-index: 1;
-  }
-
-  &__tooltip {
-    position: fixed;
-    top: 0;
-    left: 0;
-    backdrop-filter: blur($chart-tooltip-backdrop-blur);
-    border-radius: $chart-tooltip-border-radius;
-    padding: $chart-tooltip-padding-y $chart-tooltip-padding-x;
-    box-shadow: var(--atomix-box-shadow);
-    font-size: $chart-tooltip-font-size;
-    color: $chart-primary-text;
-    pointer-events: none;
-    z-index: 1070;
-    max-width: $chart-tooltip-max-width;
-    min-width: $chart-tooltip-min-width;
-    // background: $chart-primary-bg;
-    border: 1px solid $chart-primary-border;
-    opacity: 1;
-
-    &-title {
-      font-weight: $font-weight-bold;
-      margin-bottom: map.get($spacing-sizes, 2);
-      color: $chart-primary-text;
-      font-size: $font-size-sm;
-    }
-
-    &-content {
-      display: flex;
-      flex-direction: column;
-      gap: map.get($spacing-sizes, 1);
+    &-content {
+      display: flex;
+      flex-direction: column;
+      gap: map.get($spacing-sizes, 1);
     }
 
     &-dataset {
@@ -763,8 +693,8 @@
     }
 
     &-color-indicator {
-      width: 12px;
-      height: 12px;
+      width: map.get($spacing-sizes, 3);
+      height: map.get($spacing-sizes, 3);
       border-radius: 50%;
       flex-shrink: 0;
     }
@@ -807,139 +737,85 @@
     }
   }
 
-  &__axis {
-    position: relative;
-    z-index: 55;
+  &__grid {
+    stroke: $chart-primary-border;
+    stroke-width: $chart-grid-stroke-width;
+    stroke-dasharray: 2, 4;
+
+    &--major {
+      stroke-width: $chart-grid-major-stroke-width;
+      stroke-dasharray: none;
+      opacity: $chart-grid-major-opacity;
+    }
 
-    &--x {
-      text-anchor: middle;
-      dominant-baseline: hanging;
+    &--minor {
+      opacity: $chart-grid-minor-opacity;
     }
 
-    &--y {
-      text-anchor: end;
-      dominant-baseline: middle;
+    &--zero {
+      stroke-width: $chart-grid-zero-stroke-width;
+      stroke-dasharray: none;
+      opacity: $chart-grid-zero-opacity;
     }
   }
 
   &__axis-line {
-    stroke: $chart-primary-border;
+    stroke: var(--atomix-border-color);
     stroke-width: $chart-axis-line-stroke-width;
     opacity: $chart-axis-line-opacity;
-    transition: opacity $chart-transition-duration $chart-transition-timing;
-
-    &--x,
-    &--y {
-      stroke-width: 2;
-    }
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
-  &__tick-line {
-    stroke: $chart-primary-border;
-    stroke-width: 1;
-  }
-
-  &__tick-label {
-    font-size: $font-size-xs;
-    fill: $chart-secondary-text;
   }
 
   &__axis-label {
     font-size: $chart-axis-label-font-size;
     font-weight: $chart-axis-label-font-weight;
     fill: $chart-axis-label-color;
-    text-anchor: middle;
-  }
-
-  &__plot-area {
-    fill: rgba(248, 250, 252, 0.5);
-    stroke: $chart-primary-border;
-    stroke-width: 1;
-  }
-
-  &__value-label {
-    font-size: $font-size-xs;
-    fill: $chart-primary-text;
-    pointer-events: none;
-  }
-
-  &__data-label {
-    font-size: $font-size-xs;
-    fill: $chart-secondary-text;
-    pointer-events: none;
   }
 
-  &__grid {
-    stroke: $chart-primary-border;
-    stroke-width: $chart-grid-stroke-width;
-    stroke-dasharray: 2, 4;
-    // opacity: $chart-grid-opacity;
-    transition: opacity $chart-transition-duration $chart-transition-timing;
-
-    &--major {
-      stroke-width: $chart-grid-major-stroke-width;
-      stroke-dasharray: none;
-      opacity: $chart-grid-major-opacity;
+  &__legend-item {
+    &-color {
+      width: $chart-legend-color-size;
+      height: $chart-legend-color-size;
+      flex-shrink: 0;
     }
 
-    &--minor {
-      opacity: $chart-grid-minor-opacity;
+    &-text {
+      font-size: $font-size-xs;
+      fill: var(--atomix-text-primary);
     }
+  }
 
-    &--zero {
-      stroke-width: $chart-grid-zero-stroke-width;
-      stroke-dasharray: none;
-      opacity: $chart-grid-zero-opacity;
-    }
+  &__data-line {
+    stroke-width: $chart-line-width;
+    fill: none;
 
-    &:hover {
-      opacity: 0.6;
+    &--hovered {
+      stroke-width: $chart-line-width-hover;
     }
   }
 
   &__data-point {
     cursor: pointer;
-    transition: all $chart-transition-duration $chart-transition-timing !important;
-    transform-origin: center center;
+    transition: all $chart-transition-duration $chart-transition-timing;
 
     &:hover {
       opacity: 0.8;
-      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--#{$prefix}primary-border-subtle);
-      outline-offset: 2px;
     }
 
-    &:active {
-      transform: scale(1.05);
-    }
-
-    &[data-highlighted='true'] {
-      transform: scale(1.2);
-      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
-      z-index: 10;
+    @include focus-ring;
 
-      animation: chart-glow 2s ease-in-out infinite;
+    &--hovered {
+      opacity: 0.9;
+      transform: scale(1.1);
     }
 
-    &[data-selected='true'] {
-      stroke: var(--#{$prefix}primary-border-subtle);
+    &--selected {
+      opacity: 1;
       stroke-width: 2;
-      filter: drop-shadow(0 0 0 2px var(--#{$prefix}primary-border-subtle));
-    }
-
-    &[data-animated='true'] {
-      animation: chart-scale-in 0.5s ease-out;
+      filter: drop-shadow(0 0 4px currentColor);
     }
   }
 
-  &__loading {
+  &__empty {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -947,1157 +823,801 @@
     gap: map.get($spacing-sizes, 4);
     color: var(--#{$prefix}secondary-text-emphasis);
     font-size: $font-size-sm;
+    text-align: center;
+    padding: map.get($spacing-sizes, 8);
     min-height: $chart-canvas-min-height;
+    opacity: 0.6;
 
     animation: chart-fade-in 0.6s ease-out;
   }
 
-  &__loading-spinner {
-    width: $chart-loading-spinner-size;
-    height: $chart-loading-spinner-size;
-    border: 3px solid var(--#{$prefix}primary-border-subtle);
-    border-top: 3px solid var(--#{$prefix}primary-text-emphasis);
-    border-radius: 50%;
-    animation: chart-spin 1.2s $chart-transition-timing infinite;
-  }
-
-  &__loading-text {
-    font-weight: $font-weight-medium;
-    opacity: 0.8;
-    animation: chart-pulse 2s ease-in-out infinite;
-  }
-
-  &__error {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: map.get($spacing-sizes, 3);
-    color: var(--#{$prefix}error-text-emphasis);
-    font-size: $font-size-sm;
-    text-align: center;
-    padding: map.get($spacing-sizes, 8);
-    min-height: $chart-canvas-min-height;
-    background-color: var(--#{$prefix}error-bg-subtle);
-    border-radius: $border-radius-md;
-    border: var(--#{$prefix}chart-border-width) solid var(--#{$prefix}error-border-subtle);
+  // Element modifiers for consistency
+  // =============================================================================
+  &__toolbar {
+    &--sm {
+      padding: map.get($spacing-sizes, 0.5);
+      gap: map.get($spacing-sizes, 1);
+    }
 
-    animation: chart-fade-in 0.6s ease-out;
+    &--lg {
+      padding: map.get($spacing-sizes, 2);
+      gap: map.get($spacing-sizes, 3);
+    }
   }
 
-  &__empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: map.get($spacing-sizes, 4);
-    color: var(--#{$prefix}secondary-text-emphasis);
-    font-size: $font-size-sm;
-    text-align: center;
-    padding: map.get($spacing-sizes, 8);
-    min-height: $chart-canvas-min-height;
-    opacity: 0.6;
+  &__legend-item {
+    &--active {
+      opacity: 1;
+      font-weight: $font-weight-semibold;
+    }
 
-    animation: chart-fade-in 0.6s ease-out;
+    &--inactive {
+      opacity: 0.5;
+    }
   }
 
-  &--line {
-    #{$root}__canvas {
-      .line-path,
-      #{$root}__line-path {
-        fill: none;
-        stroke-width: $chart-line-width;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        transition: all $chart-transition-duration $chart-transition-timing;
-        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-
-        stroke-dasharray: 1000;
-        stroke-dashoffset: 1000;
-        animation: chart-draw-line 2s ease-out forwards;
+  // Treemap Chart Elements
+  // =============================================================================
+  &__treemap-node {
+    stroke: $chart-treemap-node-border-color;
+    stroke-width: $chart-treemap-node-border-width;
+    transition: all $chart-treemap-node-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-        &:hover {
-          stroke-width: $chart-line-width-hover;
-          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-        }
-      }
+    &:hover {
+      transform: scale($chart-treemap-node-hover-scale);
+      filter: drop-shadow($chart-treemap-node-hover-shadow);
+      stroke-width: calc($chart-treemap-node-border-width * 1.5);
+    }
 
-      .trend-line {
-        stroke-dasharray: 5, 5;
-        opacity: 0.7;
-        animation: chart-dash-flow 2s linear infinite;
-      }
+    &--hovered {
+      transform: scale($chart-treemap-node-hover-scale);
+      filter: drop-shadow($chart-treemap-node-hover-shadow);
+      stroke-width: calc($chart-treemap-node-border-width * 1.5);
+    }
 
-      .moving-average {
-        stroke-dasharray: 4, 4;
-        opacity: 0.6;
-        stroke-width: 1;
-        fill: none;
-      }
+    &--selected {
+      stroke: $chart-treemap-node-selected-border-color;
+      stroke-width: $chart-treemap-node-selected-border-width;
+      filter: drop-shadow($chart-treemap-node-selected-shadow);
+    }
 
-      .area-path,
-      #{$root}__area-path {
-        opacity: $chart-area-opacity;
-        transition: opacity $chart-transition-duration $chart-transition-timing;
-        animation: chart-area-fade 1.5s ease-out;
+    @include focus-ring;
+  }
 
-        &:hover {
-          opacity: $chart-area-opacity-hover;
-        }
-      }
-
-      .chart-point-label {
-        font-size: $font-size-xs;
-        font-weight: $font-weight-semibold;
-        text-anchor: middle;
-        dominant-baseline: middle;
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 0.2s ease;
-
-        &.visible {
-          opacity: 1;
-        }
-      }
-
-      .data-point {
-        r: $chart-data-point-radius;
-        transition: all $chart-transition-duration $chart-transition-timing;
-        cursor: pointer;
-
-        &:hover {
-          r: $chart-data-point-radius-hover;
-          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
-        }
-
-        &[data-highlighted='true'] {
-          r: $chart-data-point-radius-highlighted;
-          stroke-width: 3;
-        }
-
-        &:focus-visible {
-          outline: 2px solid $chart-focus-outline-color;
-          outline-offset: 2px;
-        }
-      }
-    }
+  &__treemap-label {
+    font-size: $chart-treemap-label-font-size;
+    font-weight: $chart-treemap-label-font-weight;
+    fill: $chart-treemap-label-color;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   }
 
-  &--area {
-    #{$root}__canvas {
-      .area-path {
-        opacity: 0.3;
-        transition: opacity $chart-transition-duration $chart-transition-timing;
-
-        animation: chart-area-fade 1.5s ease-out;
-
-        &:hover {
-          opacity: 0.45;
-        }
-      }
-
-      .line-path {
-        stroke-width: 2;
-        opacity: 0.9;
-        transition: all $chart-transition-duration $chart-transition-timing;
-
-        animation: chart-draw-line 2s ease-out;
+  // Funnel Chart Elements
+  // =============================================================================
+  &__funnel-segment {
+    stroke: $chart-funnel-segment-border-color;
+    stroke-width: $chart-funnel-segment-border-width;
+    transition: all $chart-funnel-segment-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-        &:hover {
-          stroke-width: 3;
-          opacity: 1;
-        }
-      }
+    &:hover {
+      opacity: $chart-funnel-segment-hover-opacity;
+      filter: drop-shadow($chart-funnel-segment-hover-shadow);
+      stroke-width: calc($chart-funnel-segment-border-width * 1.5);
     }
-  }
-
-  &--bar,
-  &--horizontal-bar {
-    #{$root}__canvas {
-      .bar,
-      #{$root}__bar {
-        transition: all $chart-transition-duration $chart-transition-timing;
-        cursor: pointer;
-        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-        animation: chart-bar-grow 0.8s ease-out;
-        opacity: 1;
-
-        &:hover,
-        &--hovered {
-          opacity: $chart-bar-opacity-hover;
-          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
-        }
-
-        &:focus-visible {
-          outline: 2px solid $chart-primary-border;
-          outline-offset: 2px;
-        }
-
-        &[data-animated='true'] {
-          animation: chart-bar-grow 0.8s ease-out;
-        }
-      }
 
-      .bar-group {
-        .bar {
-          animation-delay: calc(var(--bar-index) * 0.1s);
-        }
-      }
-
-      .bar-value-label,
-      #{$root}__bar-value-label {
-        font-size: $font-size-xs;
-        font-weight: $font-weight-medium;
-        fill: $chart-primary-text;
-        text-anchor: middle;
-        opacity: 1;
-        transition: opacity $chart-transition-duration $chart-transition-timing;
-        font-variant-numeric: tabular-nums;
-        pointer-events: none;
-
-        &.visible {
-          opacity: 1;
-        }
-      }
-
-      .bar-gradient {
-        stop {
-          transition: stop-opacity 0.3s ease;
-        }
-      }
-    }
+    @include focus-ring;
   }
 
-  &--bar {
-    #{$root}__canvas .bar {
-      transform-origin: bottom center;
-
-      animation: chart-bar-grow 0.8s ease-out;
-
-      &:hover {
-        transform: scaleY(1.05);
-      }
-    }
+  &__funnel-label {
+    font-size: $chart-funnel-label-font-size;
+    font-weight: $chart-funnel-label-font-weight;
+    fill: $chart-funnel-label-color;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   }
 
-  &--horizontal-bar {
-    #{$root}__canvas .bar {
-      transform-origin: left center;
-
-      animation: chart-bar-grow-horizontal 0.8s ease-out;
-
-      &:hover {
-        transform: scaleX(1.05);
-      }
-    }
+  &__funnel-conversion {
+    font-size: $chart-funnel-conversion-font-size;
+    font-weight: $chart-funnel-conversion-font-weight;
+    fill: $chart-funnel-conversion-color;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+    opacity: 0.8;
   }
 
-  &--pie,
-  &--donut,
-  &--doughnut {
-    #{$root}__canvas {
-      .pie-slice,
-      .donut-slice,
-      #{$root}__pie-slice,
-      #{$root}__donut-slice {
-        transition: all $chart-pie-transition-duration $chart-transition-timing;
-        stroke: $chart-primary-bg;
-        stroke-width: $chart-pie-stroke-width;
-        cursor: pointer;
-        transform-origin: center;
-        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-        opacity: 1;
-
-        animation: chart-pie-draw 1.5s ease-out;
-
-        &:hover,
-        &--hovered {
-          opacity: 0.8;
-          transform: scale(1.05);
-          stroke-width: $chart-pie-stroke-width-hover;
-          filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
-        }
-
-        &--selected {
-          stroke: $chart-primary-border;
-          stroke-width: 3;
-        }
-
-        &:focus-visible {
-          outline: 2px solid $chart-primary-border;
-          outline-offset: 4px;
-        }
-      }
+  // Heatmap Chart Elements
+  // =============================================================================
+  &__heatmap-cell {
+    stroke: $chart-heatmap-cell-border-color;
+    stroke-width: $chart-heatmap-cell-border-width;
+    rx: $chart-heatmap-cell-border-radius;
+    ry: $chart-heatmap-cell-border-radius;
+    transition: all $chart-heatmap-cell-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-      .pie-label,
-      #{$root}__pie-label,
-      #{$root}__donut-label {
-        font-size: $font-size-xs;
-        font-weight: $font-weight-semibold;
-        fill: $chart-primary-text;
-        text-anchor: middle;
-        pointer-events: none;
-        transition: all $chart-transition-duration $chart-transition-timing;
-        font-variant-numeric: tabular-nums;
-      }
+    &:hover {
+      transform: scale($chart-heatmap-cell-hover-scale);
+      transform-origin: center;
+      filter: drop-shadow($chart-heatmap-cell-hover-shadow);
+      stroke-width: $chart-heatmap-cell-hover-border-width;
+      z-index: 10;
     }
-  }
-
-  &--donut,
-  &--doughnut {
-    #{$root}__canvas {
-      .donut-slice {
-        animation: chart-donut-draw 1.5s ease-out;
-      }
-
-      .donut-center,
-      #{$root}__donut-center {
-        transition: fill $chart-transition-duration $chart-transition-timing;
-      }
-
-      #{$root}__donut-center-bg {
-        fill: $chart-primary-bg;
-      }
-
-      .donut-center-label,
-      #{$root}__donut-center-label {
-        font-size: $font-size-sm;
-        font-weight: $font-weight-medium;
-        fill: $chart-secondary-text;
-        text-anchor: middle;
-        dominant-baseline: central;
-        font-variant-numeric: tabular-nums;
-      }
 
-      #{$root}__donut-center-value {
-        font-size: $font-size-xl;
-        font-weight: $font-weight-bold;
-        fill: $chart-primary-text;
-        text-anchor: middle;
-        dominant-baseline: central;
-        font-variant-numeric: tabular-nums;
-      }
+    &--hovered {
+      transform: scale($chart-heatmap-cell-hover-scale);
+      transform-origin: center;
+      filter: drop-shadow($chart-heatmap-cell-hover-shadow);
+      stroke-width: $chart-heatmap-cell-hover-border-width;
+      z-index: 10;
     }
-  }
-
-  &--scatter {
-    #{$root}__canvas {
-      .scatter-point,
-      #{$root}__scatter-point {
-        stroke: $chart-primary-border;
-        stroke-width: 1;
-        transition: all $chart-transition-duration $chart-transition-timing;
-        cursor: pointer;
-        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-        animation: chart-fade-in 0.6s ease-out;
 
-        &:hover {
-          filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
-        }
-
-        &:focus-visible {
-          outline: 2px solid $chart-primary-border;
-          outline-offset: 2px;
-        }
-      }
-
-      #{$root}__scatter-label {
-        font-size: $font-size-xs;
-        fill: $chart-primary-text;
-        pointer-events: none;
-      }
-    }
+    @include focus-ring;
   }
 
-  &--bubble {
-    #{$root}__canvas {
-      #{$root}__bubble {
-        stroke: $chart-primary-bg;
-        stroke-width: 2;
-        cursor: pointer;
-        transition: all $chart-transition-duration $chart-transition-timing;
-
-        &--animated {
-          transition: all 1s ease-out;
-        }
-
-        &:hover {
-          // transform: scale(1.1);
-          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
-        }
-      }
-
-      #{$root}__bubble-label {
-        font-size: $font-size-xs;
-        font-weight: $font-weight-medium;
-        fill: $chart-tertiary-text;
-        pointer-events: none;
-
-        &--center {
-          fill: $chart-invert-text;
-          font-weight: $font-weight-bold;
-          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-        }
-      }
-    }
+  &__heatmap-label {
+    font-size: $chart-heatmap-label-font-size;
+    font-weight: $chart-heatmap-label-font-weight;
+    fill: $chart-heatmap-label-color;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
   }
 
-  &--radar {
-    #{$root}__canvas {
-      #{$root}__radar-grid {
-        stroke: $chart-primary-border;
-        stroke-width: 1;
-        opacity: 0.3;
-      }
-
-      #{$root}__radar-axis {
-        stroke: $chart-primary-border;
-        stroke-width: 1;
-        opacity: 0.5;
-      }
-
-      #{$root}__radar-label {
-        font-size: $font-size-xs;
-        fill: $chart-secondary-text;
-      }
-
-      #{$root}__radar-fill {
-        transition: opacity $chart-transition-duration $chart-transition-timing;
-
-        &:hover {
-          opacity: 0.5 !important;
-        }
-      }
-
-      #{$root}__radar-line {
-        fill: none;
-        transition: stroke-width $chart-transition-duration $chart-transition-timing;
-
-        &:hover {
-          stroke-width: 3 !important;
-        }
-      }
-
-      #{$root}__radar-point {
-        stroke: $chart-primary-bg;
-        stroke-width: 2;
-        cursor: pointer;
-        transition: all $chart-transition-duration $chart-transition-timing;
-
-        &:hover {
-          transform: scale(1.3);
-          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
-        }
-      }
-    }
+  &__heatmap-axis-label {
+    font-size: $chart-heatmap-axis-label-font-size;
+    font-weight: $chart-heatmap-axis-label-font-weight;
+    fill: $chart-heatmap-axis-label-color;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
   }
 
-  &--candlestick {
-    #{$root}__canvas {
-      .candlestick,
-      #{$root}__candlestick {
-        stroke-width: 1;
-        cursor: pointer;
-        transition: all $chart-transition-duration $chart-transition-timing;
-        animation: chart-fade-in 0.6s ease-out;
-
-        &--bullish {
-          opacity: 0.8;
-        }
-
-        &--bearish {
-          opacity: 1;
-        }
-
-        &:hover {
-          opacity: 0.8;
-          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-        }
-      }
+  &__heatmap-legend-title {
+    font-size: $chart-heatmap-legend-title-font-size;
+    font-weight: $chart-heatmap-legend-title-font-weight;
+    fill: $chart-heatmap-legend-title-color;
+    text-anchor: start;
+    dominant-baseline: baseline;
+    pointer-events: none;
+    user-select: none;
+  }
 
-      #{$root}__candlestick-highlight {
-        stroke-width: 2;
-        opacity: 0.5;
-      }
+  &__heatmap-legend-label {
+    font-size: $chart-heatmap-legend-label-font-size;
+    font-weight: $chart-heatmap-legend-label-font-weight;
+    fill: $chart-heatmap-legend-label-color;
+    text-anchor: start;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+  }
 
-      .wick,
-      #{$root}__wick {
-        stroke-width: $chart-candlestick-wick-stroke-width;
-        opacity: $chart-candlestick-wick-opacity;
+  // Candlestick Chart Elements
+  // =============================================================================
+  &__candlestick-candle {
+    stroke: $chart-candlestick-candle-border-color;
+    stroke-width: $chart-candlestick-candle-border-width;
+    rx: $chart-candlestick-candle-border-radius;
+    ry: $chart-candlestick-candle-border-radius;
+    transition: all $chart-candlestick-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-        &--hovered {
-          stroke-width: 2;
-        }
-      }
+    &:hover {
+      opacity: 0.9;
+      stroke-width: calc($chart-candlestick-candle-border-width * 1.5);
+      filter: drop-shadow($box-shadow-sm);
+    }
 
-      #{$root}__moving-average {
-        stroke-width: 2;
-        opacity: 0.8;
-      }
+    @include focus-ring;
+  }
 
-      .volume-bar {
-        opacity: $chart-volume-bar-opacity;
-        transition: opacity $chart-transition-duration $chart-transition-timing;
+  &__candlestick-wick {
+    stroke: $chart-candlestick-wick-color;
+    stroke-width: $chart-candlestick-wick-stroke-width;
+    opacity: $chart-candlestick-wick-opacity;
+    transition: all $chart-candlestick-transition-duration $chart-transition-timing;
+    shape-rendering: geometricPrecision;
 
-        &:hover {
-          opacity: $chart-volume-bar-opacity-hover;
-        }
-      }
+    &:hover {
+      opacity: 1;
+      stroke-width: calc($chart-candlestick-wick-stroke-width * 1.2);
     }
   }
 
-  &--gauge {
-    #{$root}__canvas {
-      #{$root}__gauge-background {
-        fill: $chart-secondary-bg;
-        stroke: $chart-primary-border;
-        stroke-width: 1;
-      }
-
-      #{$root}__gauge-zone {
-        stroke: $chart-primary-bg;
-        stroke-width: 2;
-      }
-
-      #{$root}__gauge-tick {
-        &--major {
-          stroke: $chart-secondary-text;
-          stroke-width: 2;
-        }
-
-        &--minor {
-          stroke: $chart-tertiary-text;
-          stroke-width: 1;
-        }
-      }
-
-      #{$root}__gauge-tick-label {
-        font-size: $font-size-xs;
-        fill: $chart-secondary-text;
-      }
-
-      #{$root}__gauge-min-max-label {
-        font-size: $font-size-sm;
-        font-weight: $font-weight-bold;
-        fill: $chart-secondary-text;
-      }
-
-      #{$root}__gauge-needle {
-        #{$root}__gauge-needle-line {
-          stroke-width: 3;
-          stroke-linecap: round;
-        }
-
-        #{$root}__gauge-needle-center {
-          stroke: $chart-primary-bg;
-          stroke-width: 2;
-        }
-      }
-
-      #{$root}__gauge-value {
-        font-size: $font-size-2xl;
-        font-weight: $font-weight-bold;
-        fill: $chart-primary-text;
-      }
+  &__candlestick-volume {
+    transition: all $chart-candlestick-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-      #{$root}__gauge-label {
-        font-size: $font-size-sm;
-        fill: $chart-secondary-text;
-      }
+    &:hover {
+      opacity: $chart-volume-bar-opacity-hover;
     }
   }
 
-  &--funnel {
-    #{$root}__canvas {
-      #{$root}__funnel-segment {
-        stroke: $chart-primary-bg;
-        stroke-width: 2;
-        cursor: pointer;
-        transition: all $chart-transition-duration $chart-transition-timing;
-
-        &--animated {
-          transition: all 1s ease-out;
-        }
-
-        &:hover {
-          opacity: 0.8;
-          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
-        }
-      }
-
-      #{$root}__funnel-label {
-        font-size: $font-size-sm;
-        font-weight: $font-weight-bold;
-        pointer-events: none;
-
-        &--inside {
-          fill: $chart-invert-text;
-          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-        }
+  // Bar Chart Elements
+  // =============================================================================
+  &__bar {
+    rx: $border-radius-sm;
+    ry: $border-radius-sm;
+    transition: all $chart-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-        &--outside {
-          fill: $chart-primary-text;
-        }
-      }
+    &:hover {
+      opacity: $chart-bar-opacity-hover;
+      filter: drop-shadow($box-shadow-sm);
+    }
 
-      #{$root}__funnel-value {
-        font-size: $font-size-xs;
-        pointer-events: none;
+    &--hovered {
+      opacity: $chart-bar-opacity-hover;
+      filter: drop-shadow($box-shadow-sm);
+    }
 
-        &--inside {
-          fill: $chart-invert-text;
-          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-        }
+    @include focus-ring;
+  }
 
-        &--outside {
-          fill: $chart-secondary-text;
-        }
-      }
+  &__bar-value-label {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    fill: var(--atomix-text-primary);
+    text-anchor: middle;
+    pointer-events: none;
+    user-select: none;
+  }
 
-      #{$root}__funnel-conversion {
-        font-size: $font-size-xs;
-        fill: $chart-secondary-text;
-        font-style: italic;
-      }
-    }
+  // Line Chart Elements
+  // =============================================================================
+  &__line-path {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: all $chart-transition-duration $chart-transition-timing;
+    shape-rendering: geometricPrecision;
   }
 
-  &--heatmap {
-    #{$root}__canvas {
-      #{$root}__heatmap-axis-label {
-        font-size: $font-size-xs;
-        fill: var(--#{$prefix}gray-7);
-        font-weight: $font-weight-medium;
-        user-select: none;
-      }
+  &__area-path {
+    transition: all $chart-transition-duration $chart-transition-timing;
+    shape-rendering: geometricPrecision;
+  }
 
-      #{$root}__heatmap-cell {
-        cursor: pointer;
-        transition: all 0.2s ease;
-        shape-rendering: crispEdges;
-
-        &--empty {
-          fill: var(--#{$prefix}gray-2);
-          stroke: var(--#{$prefix}gray-3);
-          stroke-width: 0.5;
-          opacity: 0.6;
-        }
+  &__area-fill {
+    transition: all $chart-transition-duration $chart-transition-timing;
+    shape-rendering: geometricPrecision;
+  }
 
-        &--hovered {
-          transform: scale(1.1);
-          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-          z-index: 10;
-        }
+  &__area-point {
+    transition: all $chart-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-        &:focus-visible {
-          outline: 2px solid var(--#{$prefix}primary-6);
-          outline-offset: 1px;
-        }
-      }
+    &:hover {
+      transform: scale(1.2);
+    }
 
-      #{$root}__heatmap-value {
-        font-size: 9px;
-        font-weight: $font-weight-medium;
-        pointer-events: none;
-        user-select: none;
-        font-variant-numeric: tabular-nums;
+    &--hovered {
+      transform: scale(1.2);
+    }
 
-        &--light {
-          fill: white;
-          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-        }
+    @include focus-ring;
+  }
 
-        &--dark {
-          fill: var(--#{$prefix}gray-8);
-        }
-      }
+  &__point-label {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    text-anchor: middle;
+    pointer-events: none;
+    user-select: none;
+  }
 
-      // Calendar variant styles
-      &.c-chart--calendar {
-        #{$root}__heatmap-cell {
-          rx: 2;
-        }
-      }
+  // Pie Chart Elements
+  // =============================================================================
+  &__pie-slice {
+    transition: all $chart-pie-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-      // Grid variant styles
-      &.c-chart--grid {
-        #{$root}__heatmap-cell {
-          rx: 4;
-        }
-      }
+    &:hover {
+      stroke-width: $chart-pie-stroke-width-hover;
+      filter: drop-shadow($box-shadow-sm);
     }
-  }
-
-  &--treemap {
-    #{$root}__canvas {
-      #{$root}__treemap-node {
-        cursor: pointer;
-        stroke: $chart-primary-bg;
-        stroke-width: 1;
-        transition: all $chart-transition-duration $chart-transition-timing;
 
-        &--animated {
-          transition: all 750ms ease-out;
-        }
+    &--hovered {
+      stroke-width: $chart-pie-stroke-width-hover;
+      filter: drop-shadow($box-shadow-sm);
+    }
 
-        &--hovered {
-          opacity: 0.8;
-        }
+    @include focus-ring;
+  }
 
-        &--selected {
-          stroke-width: 2;
-        }
-      }
+  &__pie-label {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    fill: var(--atomix-text-primary);
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
 
-      #{$root}__treemap-label {
-        font-size: $font-size-xs;
-        font-weight: $font-weight-bold;
-        fill: $chart-invert-text;
-        pointer-events: none;
-      }
+  // Donut Chart Elements
+  // =============================================================================
+  &__donut-slice {
+    transition: all $chart-pie-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
+    transform-origin: center;
 
-      #{$root}__treemap-value {
-        font-size: $font-size-xs;
-        fill: $chart-invert-text;
-        opacity: 0.8;
-        pointer-events: none;
-      }
+    &:hover {
+      transform: scale(1.02);
+      filter: drop-shadow($box-shadow-sm);
     }
-  }
-
-  &--waterfall {
-    #{$root}__canvas {
-      #{$root}__waterfall-bar {
-        stroke: $chart-primary-bg;
-        stroke-width: 2;
-        cursor: pointer;
-        transition: all $chart-transition-duration $chart-transition-timing;
 
-        &--animated {
-          transition: all 1s ease-out;
-        }
+    &--hovered {
+      transform: scale(1.02);
+      filter: drop-shadow($box-shadow-sm);
+    }
 
-        &:hover {
-          opacity: 0.8;
-          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
-        }
-      }
+    @include focus-ring;
+  }
 
-      #{$root}__waterfall-value {
-        font-size: $font-size-xs;
-        font-weight: $font-weight-bold;
-        pointer-events: none;
+  &__donut-label {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    fill: var(--atomix-text-primary);
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
 
-        &--center {
-          fill: $chart-invert-text;
-          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-        }
+  &__donut-percentage {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    fill: var(--atomix-secondary-text-emphasis);
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+  }
 
-        &--outside {
-          fill: $chart-primary-text;
-        }
-      }
+  &__donut-center-label {
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+    fill: var(--atomix-secondary-text-emphasis);
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+  }
 
-      #{$root}__waterfall-connector {
-        stroke-width: 2;
-        opacity: 0.7;
-      }
+  &__donut-center-value {
+    font-size: $font-size-lg;
+    font-weight: $font-weight-bold;
+    fill: var(--atomix-text-primary);
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+  }
 
-      #{$root}__waterfall-cumulative-line {
-        stroke-width: 3;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
+  // Scatter Chart Elements
+  // =============================================================================
+  &__scatter-point {
+    transition: all $chart-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-      #{$root}__waterfall-cumulative-point {
-        stroke: $chart-primary-bg;
-        stroke-width: 2;
-      }
+    &:hover {
+      transform: scale(1.2);
+      filter: drop-shadow($box-shadow-sm);
     }
-  }
-}
 
-// Animations
-@keyframes chart-spin {
-  0% {
-    transform: rotate(0deg);
+    @include focus-ring;
   }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 
-@keyframes chart-shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
+  &__scatter-label {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    fill: var(--atomix-text-primary);
+    text-anchor: middle;
+    pointer-events: none;
+    user-select: none;
   }
-}
 
-@keyframes chart-pulse {
-  0%,
-  100% {
-    opacity: 0.8;
-  }
-  50% {
-    opacity: 1;
-  }
-}
+  // Bubble Chart Elements
+  // =============================================================================
+  &__bubble {
+    transition: all $chart-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-@keyframes chart-draw-line {
-  0% {
-    stroke-dashoffset: 1000;
-  }
-  100% {
-    stroke-dashoffset: 0;
+    &:hover {
+      transform: scale(1.1);
+      filter: drop-shadow($box-shadow-md);
+    }
+
+    &--hovered {
+      transform: scale(1.1);
+      filter: drop-shadow($box-shadow-md);
+    }
+
+    @include focus-ring;
   }
-}
 
-@keyframes chart-area-fade {
-  0% {
-    opacity: 0;
+  &__bubble-label {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    fill: var(--atomix-text-primary);
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   }
-  100% {
+
+  // Radar Chart Elements
+  // =============================================================================
+  &__radar-grid-line {
+    stroke: var(--atomix-border-color);
+    stroke-width: 1;
     opacity: 0.3;
+    shape-rendering: geometricPrecision;
   }
-}
 
-@keyframes chart-bar-grow {
-  0% {
-    transform: scaleY(0);
-  }
-  100% {
-    transform: scaleY(1);
+  &__radar-axis-label {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    fill: var(--atomix-secondary-text-emphasis);
+    text-anchor: middle;
+    dominant-baseline: middle;
+    pointer-events: none;
+    user-select: none;
   }
-}
 
-@keyframes chart-bar-grow-horizontal {
-  0% {
-    transform: scaleX(0);
-  }
-  100% {
-    transform: scaleX(1);
+  &__radar-area {
+    transition: all $chart-transition-duration $chart-transition-timing;
+    shape-rendering: geometricPrecision;
   }
-}
 
-@keyframes chart-pie-draw {
-  0% {
-    stroke-dasharray: 0 628;
-  }
-  100% {
-    stroke-dasharray: 628 628;
+  &__radar-line {
+    transition: all $chart-transition-duration $chart-transition-timing;
+    shape-rendering: geometricPrecision;
+    stroke-linecap: round;
+    stroke-linejoin: round;
   }
-}
 
-@keyframes chart-donut-draw {
-  0% {
-    stroke-dasharray: 0 628;
-  }
-  100% {
-    stroke-dasharray: 628 628;
-  }
-}
+  &__radar-point {
+    transition: all $chart-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-@keyframes chart-fade-in {
-  0% {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+    &:hover {
+      transform: scale(1.3);
+      filter: drop-shadow($box-shadow-sm);
+    }
 
-@keyframes chart-scale-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.3);
-  }
-  60% {
-    opacity: 0.8;
-    transform: scale(1.1);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
+    &--hovered {
+      transform: scale(1.3);
+      filter: drop-shadow($box-shadow-sm);
+    }
 
-@keyframes chart-slide-in {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
+    @include focus-ring;
   }
-}
 
-@keyframes chart-bubble-grow {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
+  // Waterfall Chart Elements
+  // =============================================================================
+  &__waterfall-bar {
+    rx: $border-radius-sm;
+    ry: $border-radius-sm;
+    transition: all $chart-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
 
-@keyframes chart-dash-flow {
-  0% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: 10;
-  }
-}
+    &:hover {
+      opacity: $chart-bar-opacity-hover;
+      filter: drop-shadow($box-shadow-sm);
+    }
 
-@keyframes chart-glow {
-  0%,
-  100% {
-    filter: drop-shadow(0 0 5px currentColor);
-  }
-  50% {
-    filter: drop-shadow(0 0 15px currentColor);
-  }
-}
+    &--animated {
+      animation: chart-bar-appear $chart-animation-duration $chart-animation-easing;
+      transform-origin: bottom center;
+    }
 
-@keyframes chart-pulse-dot {
-  0%,
-  100% {
-    opacity: 1;
-    transform: scale(1);
+    @include focus-ring;
   }
-  50% {
-    opacity: 0.5;
-    transform: scale(1.2);
-  }
-}
 
-@keyframes chart-zoom-in {
-  0% {
-    transform: scale(0.8);
-    opacity: 0;
+  &__waterfall-value {
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    fill: var(--atomix-text-primary);
+    text-anchor: middle;
+    pointer-events: none;
+    user-select: none;
+
+    &--center {
+      dominant-baseline: middle;
+    }
+
+    &--outside {
+      dominant-baseline: auto;
+    }
   }
-  100% {
-    transform: scale(1);
-    opacity: 1;
+
+  &__waterfall-connector {
+    stroke: var(--atomix-border-color);
+    stroke-width: 1;
+    opacity: 0.6;
+    shape-rendering: geometricPrecision;
   }
-}
 
-@keyframes chart-slide-up {
-  0% {
-    transform: translateY(20px);
-    opacity: 0;
+  &__waterfall-cumulative-line {
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: all $chart-transition-duration $chart-transition-timing;
+    shape-rendering: geometricPrecision;
   }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
+
+  &__waterfall-cumulative-point {
+    transition: all $chart-transition-duration $chart-transition-timing;
+    cursor: pointer;
+    shape-rendering: geometricPrecision;
+
+    &:hover {
+      transform: scale(1.3);
+    }
+
+    @include focus-ring;
   }
 }
 
-// Responsive Design
-@media (max-width: $chart-mobile-breakpoint) {
-  .c-chart {
-    --#{$prefix}chart-min-height: #{map.get($spacing-sizes, 40)};
-    border-radius: $border-radius-md;
+// Accessibility Enhancements
+// =============================================================================
+.c-chart {
+  $root: &;
 
-    &__header {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: map.get($spacing-sizes, 2);
+  // High contrast mode support
+  @media (prefers-contrast: high) {
+    border-width: calc(var(--#{$prefix}border-width) * 2);
+
+    &--selected {
+      border-width: calc(var(--#{$prefix}border-width) * 3);
     }
 
-    &__toolbar {
-      width: 100%;
-      justify-content: flex-end;
-      padding: map.get($spacing-sizes, 2);
-      gap: map.get($spacing-sizes, 2);
+    &__action {
+      border-width: calc(var(--#{$prefix}border-width) * 2);
 
-      // Stack toolbar items on very small screens
-      @media (max-width: 480px) {
-        flex-wrap: wrap;
-        justify-content: center;
+      &:focus-visible {
+        outline-width: calc(var(--#{$prefix}border-width) * 3);
       }
     }
 
-    &__action {
-      width: rem(36px);
-      height: rem(36px);
+    &__data-point {
+      stroke-width: 2;
 
-      svg {
-        width: rem(18px);
-        height: rem(18px);
+      &--selected {
+        stroke-width: 3;
       }
     }
 
-    &__export-dropdown {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      margin-top: 0;
-      min-width: rem(200px);
-      max-width: 90vw;
-    }
+    &__grid {
+      stroke-width: 1;
+      opacity: 0.6;
 
-    &__legend {
-      flex-direction: column;
-      gap: map.get($spacing-sizes, 2);
-    }
+      &--major {
+        stroke-width: 1.5;
+        opacity: 0.8;
+      }
 
-    &__legend-item {
-      justify-content: space-between;
-      width: 100%;
+      &--zero {
+        stroke-width: 2;
+        opacity: 1;
+      }
     }
 
-    &:hover {
-      transform: none;
-    }
-  }
-}
+    &__treemap-node {
+      stroke-width: calc($chart-treemap-node-border-width * 2);
 
-@media (max-width: $chart-small-mobile-breakpoint) {
-  .c-chart {
-    --#{$prefix}chart-min-height: #{map.get($spacing-sizes, 36)};
-    --#{$prefix}chart-padding: #{map.get($spacing-sizes, 2)};
-    border-radius: $border-radius-sm;
+      &--selected {
+        stroke-width: calc($chart-treemap-node-selected-border-width * 1.5);
+      }
 
-    &__title {
-      font-size: $font-size-md;
-      margin-bottom: map.get($spacing-sizes, 1);
+      &:focus-visible {
+        outline-width: calc(var(--#{$prefix}border-width) * 3);
+      }
     }
 
-    &__subtitle {
-      font-size: $font-size-xs;
+    &__funnel-segment {
+      stroke-width: calc($chart-funnel-segment-border-width * 2);
+
+      &:focus-visible {
+        outline-width: calc(var(--#{$prefix}border-width) * 3);
+      }
     }
 
-    &__toolbar {
-      padding: map.get($spacing-sizes, 1);
-      gap: map.get($spacing-sizes, 1);
-      border-radius: $border-radius-sm;
+    &__heatmap-cell {
+      stroke-width: calc($chart-heatmap-cell-border-width * 2);
+
+      &--hovered {
+        stroke-width: calc($chart-heatmap-cell-hover-border-width * 1.5);
+      }
+
+      &:focus-visible {
+        outline-width: calc(var(--#{$prefix}border-width) * 3);
+      }
     }
 
-    &__action {
-      width: rem(28px);
-      height: rem(28px);
-      font-size: rem(12px);
+    &__candlestick-candle {
+      stroke-width: calc($chart-candlestick-candle-border-width * 2);
 
-      svg {
-        width: rem(14px);
-        height: rem(14px);
+      &:focus-visible {
+        outline-width: calc(var(--#{$prefix}border-width) * 3);
       }
     }
 
-    &__export-option {
-      padding: map.get($spacing-sizes, 1) map.get($spacing-sizes, 2);
-      font-size: rem(11px);
+    &__candlestick-wick {
+      stroke-width: calc($chart-candlestick-wick-stroke-width * 2);
+      opacity: 1;
     }
   }
-}
 
-// Enhanced accessibility
-@media (prefers-reduced-motion: reduce) {
-  .c-chart {
+  // Reduced motion support
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
+    animation: none;
 
-    &:hover {
-      transform: none;
+    &::before,
+    &::after {
+      animation: none;
+      transition: none;
     }
 
-    * {
-      animation-duration: 0.01s !important;
-      transition-duration: 0.01s !important;
+    &--elevated {
+      transform: none;
+
+      &:hover {
+        transform: none;
+      }
     }
 
-    &__real-time-indicator::before {
-      animation: none;
+    &--clickable {
+      transition: none;
+
+      &:hover {
+        transform: none;
+      }
+
+      &:active {
+        transform: none;
+      }
     }
-  }
-}
 
-// Focus management for keyboard navigation
-.c-chart:focus-within {
-  .c-chart__data-point:focus {
-    outline: 2px solid var(--#{$prefix}primary-6);
-    outline-offset: 2px;
-    z-index: 10;
-  }
+    &__action {
+      transition: none;
 
-  &__canvas svg {
-    outline: 2px solid var(--#{$prefix}primary-border-subtle);
-    outline-offset: 2px;
-  }
-}
+      &:hover {
+        transform: none;
+      }
 
-@media (prefers-contrast: high) {
-  .c-chart {
-    border-width: 2px;
-    background-color: white;
-    color: black;
-    backdrop-filter: none;
+      svg {
+        transition: none;
 
-    &__grid {
-      stroke-width: 2;
-      opacity: 0.8;
-      stroke: black;
+        &:hover {
+          transform: none;
+        }
+      }
     }
 
-    &__title {
-      color: black;
+    &__data-point {
+      transition: none;
+
+      &--hovered {
+        transform: none;
+      }
     }
 
-    &__data-point {
-      stroke: black;
-      stroke-width: 2;
+    &__treemap-node {
+      transition: none;
+
+      &:hover {
+        transform: none;
+      }
+
+      &--hovered {
+        transform: none;
+      }
     }
 
-    &__crosshair line {
-      stroke: black;
-      opacity: 1;
+    &__funnel-segment {
+      transition: none;
+
+      &:hover {
+        transform: none;
+      }
+    }
+
+    &__heatmap-cell {
+      transition: none;
+
+      &:hover {
+        transform: none;
+      }
+
+      &--hovered {
+        transform: none;
+      }
     }
 
-    &__zoom-indicator {
-      background: black;
-      color: white;
-      border: 2px solid white;
+    &__candlestick-candle {
+      transition: none;
+
+      &:hover {
+        transform: none;
+      }
     }
 
-    .line-path {
-      stroke-width: 3 !important;
+    &__candlestick-wick {
+      transition: none;
     }
 
-    .bar {
-      stroke: black;
-      stroke-width: 2;
+    &__candlestick-volume {
+      transition: none;
     }
-  }
-}
 
-// Print styles
-@media print {
-  .c-chart {
-    break-inside: avoid;
-    box-shadow: none;
-    border: 2px solid black;
-    background: white;
+    &__empty {
+      animation: none;
+    }
 
-    &__toolbar {
-      display: none;
+    &--loading {
+      #{$root}__content {
+        &::after {
+          animation: none;
+        }
+      }
     }
 
-    &__crosshair,
-    &__zoom-indicator,
-    &__real-time-indicator {
-      display: none;
+    &__waterfall-bar {
+      &--animated {
+        animation: none;
+      }
     }
 
-    * {
-      animation: none !important;
-      transition: none !important;
+    &__canvas {
+      svg {
+        animation: none;
+        opacity: 1;
+      }
     }
   }
 }
+
+// Chart Animations
+// =============================================================================
+@keyframes chart-bar-appear {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}