@shohojdhara/atomix 0.4.8 → 0.5.0

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

@@ -1,2788 +0,0 @@
-// Component: Chart
-// =============================================================================
-
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.spacing' as *;
-@use '../01-settings/settings.typography' as *;
-@use '../01-settings/settings.border-radius' as *;
-@use '../01-settings/settings.box-shadow' as *;
-@use '../02-tools/tools.component' as component;
-
-@use 'sass:map';
-@use 'sass:math';
-
-// Chart Variables
-// =============================================================================
-$chart-border-width: 1px;
-$chart-backdrop-blur: 8px;
-$chart-header-backdrop-blur: 12px;
-$chart-tooltip-backdrop-blur: 16px;
-$chart-transition-duration: 0.3s;
-$chart-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-$chart-hover-transform: translateY(-1px);
-$chart-active-transform: translateY(0);
-$chart-focus-ring-width: 3px;
-$chart-glassmorphism-opacity: 0.6;
-$chart-pattern-opacity: 0.03;
-$chart-pattern-size: 20px;
-$chart-loading-spinner-size: map.get($spacing-sizes, 8);
-$chart-error-icon-size: map.get($spacing-sizes, 12);
-$chart-empty-icon-size: map.get($spacing-sizes, 16);
-$chart-legend-color-size: map.get($spacing-sizes, 3);
-$chart-action-button-size: map.get($spacing-sizes, 8);
-$chart-touch-target-size: map.get($spacing-sizes, 10);
-
-// Chart Color Palette
-$chart-colors: (
-  primary: var(--atomix-primary-6),
-  secondary: var(--atomix-secondary),
-  success: var(--atomix-success),
-  warning: var(--atomix-warning),
-  error: var(--atomix-error),
-  info: var(--atomix-info),
-  accent: var(--atomix-accent),
-  neutral: var(--atomix-neutral),
-);
-
-// Chart Gradients
-$chart-gradients-bg: (
-  primary: linear-gradient(
-      135deg,
-      rgba(var(--atomix-primary-rgb), 0.1),
-      rgba(var(--atomix-primary-rgb), 0.2)
-    ),
-  secondary: linear-gradient(
-      135deg,
-      rgba(var(--atomix-secondary-rgb), 0.1),
-      rgba(var(--atomix-secondary-rgb), 0.2)
-    ),
-  success: linear-gradient(
-      135deg,
-      rgba(var(--atomix-success-rgb), 0.1),
-      rgba(var(--atomix-success-rgb), 0.2)
-    ),
-  warning: linear-gradient(
-      135deg,
-      rgba(var(--atomix-warning-rgb), 0.1),
-      rgba(var(--atomix-warning-rgb), 0.2)
-    ),
-  error: linear-gradient(
-      135deg,
-      rgba(var(--atomix-error-rgb), 0.1),
-      rgba(var(--atomix-error-rgb), 0.2)
-    ),
-  info: linear-gradient(
-      135deg,
-      rgba(var(--atomix-info-rgb), 0.1),
-      rgba(var(--atomix-info-rgb), 0.2)
-    ),
-);
-
-$chart-gradients: (
-  primary: linear-gradient(135deg, var(--atomix-primary), var(--atomix-primary-bg-subtle)),
-  secondary: linear-gradient(135deg, var(--atomix-secondary), var(--atomix-secondary-bg-subtle)),
-  success: linear-gradient(135deg, var(--atomix-success), var(--atomix-success-bg-subtle)),
-  warning: linear-gradient(135deg, var(--atomix-warning), var(--atomix-warning-bg-subtle)),
-  error: linear-gradient(135deg, var(--atomix-error), var(--atomix-error-bg-subtle)),
-  info: linear-gradient(135deg, var(--atomix-info), var(--atomix-info-bg-subtle)),
-);
-
-// Chart Mixins gradient-background
-// =============================================================================
-
-@mixin chart-glassmorphism {
-  backdrop-filter: blur($chart-backdrop-blur);
-  -webkit-backdrop-filter: blur($chart-backdrop-blur);
-  background: rgba(255, 255, 255, 0.05);
-  border: $chart-border-width solid rgba(255, 255, 255, 0.1);
-}
-
-@mixin chart-gradient-background($color: 'primary') {
-  background: map.get($chart-gradients-bg, $color);
-}
-
-@mixin chart-gradient-border($color: 'primary') {
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, map.get($chart-colors, $color), transparent);
-    opacity: $chart-glassmorphism-opacity;
-  }
-}
-
-@mixin chart-hover-elevation {
-  transition:
-    box-shadow $chart-transition-duration $chart-transition-timing,
-    transform $chart-transition-duration $chart-transition-timing,
-    border-color $chart-transition-duration $chart-transition-timing;
-
-  &:hover {
-    box-shadow: $box-shadow-lg;
-    transform: $chart-hover-transform;
-    border-color: var(--atomix-primary-border-subtle);
-  }
-}
-
-@mixin chart-focus-ring {
-  &:focus-visible {
-    @include component.focus-ring;
-    box-shadow:
-      $box-shadow-md,
-      0 0 0 $chart-focus-ring-width var(--atomix-primary-border-subtle);
-  }
-}
-
-@mixin chart-loading-shimmer {
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-    animation: chart-shimmer 2s infinite;
-  }
-}
-
-@mixin chart-data-animation($type: 'fade') {
-  @if $type == 'fade' {
-    animation: chart-fade-in 0.6s ease-out;
-  } @else if $type == 'scale' {
-    animation: chart-scale-in 0.5s ease-out;
-  } @else if $type == 'slide' {
-    animation: chart-slide-in 0.7s ease-out;
-  }
-}
-
-// Block: Base chart component
-// =============================================================================
-.c-chart {
-  // @include component.component-base;
-  @include chart-hover-elevation;
-  // @include chart-focus-ring;
-  @include chart-gradient-border;
-  @include chart-gradient-background;
-
-  display: flex;
-  flex-direction: column;
-  border: $chart-border-width solid var(--atomix-brand-border-subtle);
-  border-radius: $border-radius-lg;
-  overflow: hidden;
-  box-shadow: $box-shadow-sm;
-  backdrop-filter: blur($chart-backdrop-blur);
-  position: relative;
-  isolation: isolate;
-
-  // Default sizing with fluid height
-  min-height: map.get($spacing-sizes, 52); // 208px
-  width: 100%;
-  max-width: 100%;
-
-  // Enhanced modern styling
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      135deg,
-      rgba(var(--atomix-primary-rgb), 0.1) 0%,
-      transparent 50%,
-      rgba(var(--atomix-secondary-rgb), 0.05) 100%
-    );
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  // CSS Custom Properties for dynamic theming
-  --chart-primary-color: #{map.get($chart-colors, primary)};
-  --chart-secondary-color: #{map.get($chart-colors, secondary)};
-  --chart-border-radius: #{$border-radius-lg};
-  --chart-padding: #{map.get($spacing-sizes, 4)};
-  --chart-gap: #{map.get($spacing-sizes, 2)};
-}
-
-// Size Modifiers
-// =============================================================================
-.c-chart--xs {
-  min-height: map.get($spacing-sizes, 28); // 112px
-  font-size: $font-size-xs;
-  --chart-padding: #{map.get($spacing-sizes, 2)};
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 2);
-  }
-
-  .c-chart__content {
-    padding: map.get($spacing-sizes, 2);
-  }
-
-  .c-chart__title {
-    font-size: $font-size-sm;
-  }
-
-  .c-chart__action {
-    width: map.get($spacing-sizes, 6);
-    height: map.get($spacing-sizes, 6);
-  }
-}
-
-.c-chart--sm {
-  min-height: map.get($spacing-sizes, 36); // 144px
-  font-size: $font-size-sm;
-  --chart-padding: #{map.get($spacing-sizes, 3)};
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 3);
-  }
-
-  .c-chart__content {
-    padding: map.get($spacing-sizes, 3);
-  }
-
-  .c-chart__title {
-    font-size: $font-size-md;
-  }
-
-  .c-chart__action {
-    width: map.get($spacing-sizes, 7);
-    height: map.get($spacing-sizes, 7);
-  }
-}
-
-.c-chart--md {
-  min-height: map.get($spacing-sizes, 52); // 208px
-  font-size: $font-size-base;
-  --chart-padding: #{map.get($spacing-sizes, 4)};
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 4);
-  }
-
-  .c-chart__content {
-    padding: map.get($spacing-sizes, 4);
-  }
-
-  .c-chart__title {
-    font-size: $font-size-lg;
-  }
-}
-
-.c-chart--lg {
-  min-height: map.get($spacing-sizes, 72); // 288px
-  font-size: $font-size-md;
-  --chart-padding: #{map.get($spacing-sizes, 6)};
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 6);
-  }
-
-  .c-chart__content {
-    padding: map.get($spacing-sizes, 6);
-  }
-
-  .c-chart__title {
-    font-size: $font-size-lg;
-  }
-
-  .c-chart__action {
-    width: map.get($spacing-sizes, 9);
-    height: map.get($spacing-sizes, 9);
-  }
-}
-
-.c-chart--xl {
-  min-height: map.get($spacing-sizes, 80); // 320px
-  font-size: $font-size-lg;
-  --chart-padding: #{map.get($spacing-sizes, 8)};
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 8);
-  }
-
-  .c-chart__content {
-    padding: map.get($spacing-sizes, 8);
-  }
-
-  .c-chart__title {
-    font-size: $font-size-lg;
-  }
-
-  .c-chart__action {
-    width: map.get($spacing-sizes, 10);
-    height: map.get($spacing-sizes, 10);
-  }
-}
-
-.c-chart--2xl {
-  min-height: map.get($spacing-sizes, 96); // 384px
-  font-size: $font-size-lg;
-  --chart-padding: #{map.get($spacing-sizes, 10)};
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 10);
-  }
-
-  .c-chart__content {
-    padding: map.get($spacing-sizes, 10);
-  }
-
-  .c-chart__title {
-    font-size: $font-size-lg;
-  }
-}
-
-.c-chart--full {
-  height: 100vh;
-  min-height: auto;
-  border-radius: 0;
-}
-
-.c-chart--auto {
-  height: auto;
-  min-height: map.get($spacing-sizes, 32);
-}
-
-// Color Modifiers
-// =============================================================================
-.c-chart--primary {
-  @include chart-gradient-border('primary');
-
-  --chart-primary-color: #{map.get($chart-colors, primary)};
-
-  .c-chart__title {
-    color: var(--atomix-primary-text-emphasis);
-    background: map.get($chart-gradients, primary);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-
-    @supports not (background-clip: text) {
-      color: var(--atomix-primary-text-emphasis);
-      background: none;
-      -webkit-text-fill-color: initial;
-    }
-  }
-
-  &:hover {
-    border-color: var(--atomix-primary-border-subtle);
-  }
-}
-
-.c-chart--secondary {
-  @include chart-gradient-border('secondary');
-  @include chart-gradient-background('secondary');
-
-  --chart-primary-color: #{map.get($chart-colors, secondary)};
-
-  .c-chart__title {
-    color: var(--atomix-secondary-text-emphasis);
-    background: map.get($chart-gradients, secondary);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  &:hover {
-    border-color: var(--atomix-secondary-border-subtle);
-  }
-}
-
-.c-chart--success {
-  @include chart-gradient-border('success');
-  @include chart-gradient-background('success');
-  --chart-primary-color: #{map.get($chart-colors, success)};
-
-  .c-chart__title {
-    color: var(--atomix-success-text-emphasis);
-    background: map.get($chart-gradients, success);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-
-    @supports not (background-clip: text) {
-      color: var(--atomix-success-text-emphasis);
-      background: none;
-      -webkit-text-fill-color: initial;
-    }
-  }
-
-  &:hover {
-    border-color: var(--atomix-success-border-subtle);
-  }
-}
-
-.c-chart--error {
-  @include chart-gradient-border('error');
-  @include chart-gradient-background('error');
-  --chart-primary-color: #{map.get($chart-colors, error)};
-
-  .c-chart__title {
-    color: var(--atomix-error-text-emphasis);
-    background: map.get($chart-gradients, error);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-
-    @supports not (background-clip: text) {
-      color: var(--atomix-error-text-emphasis);
-      background: none;
-      -webkit-text-fill-color: initial;
-    }
-  }
-
-  &:hover {
-    border-color: var(--atomix-error-border-subtle);
-  }
-}
-
-.c-chart--warning {
-  @include chart-gradient-border('warning');
-  @include chart-gradient-background('warning');
-  --chart-primary-color: #{map.get($chart-colors, warning)};
-
-  .c-chart__title {
-    color: var(--atomix-warning-text-emphasis);
-    background: map.get($chart-gradients, warning);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-
-    @supports not (background-clip: text) {
-      color: var(--atomix-warning-text-emphasis);
-      background: none;
-      -webkit-text-fill-color: initial;
-    }
-  }
-
-  &:hover {
-    border-color: var(--atomix-warning-border-subtle);
-  }
-}
-
-.c-chart--info {
-  @include chart-gradient-border('info');
-  @include chart-gradient-background('info');
-  --chart-primary-color: #{map.get($chart-colors, info)};
-
-  .c-chart__title {
-    color: var(--atomix-info-text-emphasis);
-    background: map.get($chart-gradients, info);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-
-    @supports not (background-clip: text) {
-      color: var(--atomix-info-text-emphasis);
-      background: none;
-      -webkit-text-fill-color: initial;
-    }
-  }
-
-  &:hover {
-    border-color: var(--atomix-info-border-subtle);
-  }
-}
-
-.c-chart--accent {
-  @include chart-gradient-border('accent');
-  @include chart-gradient-background('accent');
-  --chart-primary-color: #{map.get($chart-colors, accent)};
-
-  border-color: var(--atomix-accent-border-subtle);
-
-  .c-chart__title {
-    color: var(--atomix-accent-text-emphasis);
-  }
-
-  &:hover {
-    border-color: var(--atomix-accent-border-subtle);
-  }
-}
-
-.c-chart--neutral {
-  @include chart-gradient-border('neutral');
-  @include chart-gradient-background('neutral');
-  --chart-primary-color: #{map.get($chart-colors, neutral)};
-
-  border-color: var(--atomix-neutral-border-subtle);
-
-  .c-chart__title {
-    color: var(--atomix-neutral-text-emphasis);
-  }
-
-  &:hover {
-    border-color: var(--atomix-neutral-border-subtle);
-  }
-}
-
-// State Modifiers
-// =============================================================================
-.c-chart--loading {
-  @include component.component-loading;
-
-  .c-chart__content {
-    @include chart-loading-shimmer;
-  }
-
-  .c-chart__canvas {
-    opacity: 0.3;
-    filter: blur(1px);
-  }
-}
-
-.c-chart--interactive {
-  cursor: pointer;
-  user-select: none;
-
-  &: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);
-  }
-}
-
-.c-chart--disabled {
-  @include component.component-disabled;
-
-  .c-chart__content {
-    filter: grayscale(80%) opacity(0.6);
-  }
-
-  .c-chart__canvas {
-    pointer-events: none;
-  }
-
-  &:hover {
-    transform: none;
-    box-shadow: $box-shadow-sm;
-  }
-}
-
-.c-chart--fullscreen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 9999;
-  border-radius: 0;
-  box-shadow: none;
-  background: var(--atomix-primary-bg-default);
-
-  @include component.component-animation('scale');
-
-  .c-chart__header {
-    border-bottom: 2px solid var(--atomix-primary-border-subtle);
-  }
-}
-
-.c-chart--minimized {
-  min-height: map.get($spacing-sizes, 20); // 80px
-  max-height: map.get($spacing-sizes, 24); // 96px
-  overflow: hidden;
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 2);
-  }
-
-  .c-chart__content {
-    display: none;
-  }
-
-  .c-chart__legend {
-    display: none;
-  }
-
-  .c-chart__title {
-    font-size: $font-size-sm;
-    margin-bottom: 0;
-  }
-
-  .c-chart__subtitle {
-    display: none;
-  }
-}
-
-.c-chart--elevated {
-  box-shadow: $box-shadow-lg;
-  transform: translateY(-2px);
-
-  &:hover {
-    box-shadow: $box-shadow-xl;
-    transform: translateY(-4px);
-  }
-}
-
-.c-chart--flat {
-  box-shadow: none;
-  border: 2px solid var(--atomix-primary-border-subtle);
-
-  &:hover {
-    box-shadow: $box-shadow-sm;
-    transform: none;
-  }
-}
-
-.c-chart--bordered {
-  border: 2px solid var(--atomix-primary-border-subtle);
-}
-
-.c-chart--rounded {
-  border-radius: $border-radius-xl;
-}
-
-.c-chart--square {
-  border-radius: 0;
-}
-
-// Elements
-// =============================================================================
-.c-chart__header {
-  padding: var(--chart-padding);
-  border-bottom: $chart-border-width solid var(--atomix-brand-bg-subtle);
-  backdrop-filter: blur($chart-header-backdrop-blur);
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--chart-gap);
-  z-index: 2;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: var(--chart-padding);
-    right: var(--chart-padding);
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--atomix-brand-border-subtle), transparent);
-  }
-}
-
-.c-chart__header-content {
-  flex: 1;
-  min-width: 0; // Prevent flex item from overflowing
-}
-
-.c-chart__title {
-  margin: 0 0 map.get($spacing-sizes, 2) 0;
-  font-size: $font-size-lg;
-  font-weight: $font-weight-semibold;
-  color: var(--atomix-primary-text-emphasis);
-  letter-spacing: -0.02em;
-  line-height: 1.3;
-  word-wrap: break-word;
-  hyphens: auto;
-
-  background: linear-gradient(
-    135deg,
-    var(--atomix-primary-text-emphasis),
-    var(--atomix-secondary-text-emphasis)
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-
-  // Responsive font scaling
-  @container (max-width: 400px) {
-    font-size: $font-size-md;
-  }
-}
-
-.c-chart__subtitle {
-  margin: 0;
-  color: var(--atomix-secondary-text-emphasis);
-  opacity: 0.8;
-  line-height: 1.4;
-  word-wrap: break-word;
-
-  @container (max-width: 400px) {
-    font-size: $font-size-xs;
-  }
-}
-
-.c-chart__toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--chart-gap);
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.c-chart__action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: $chart-action-button-size;
-  height: $chart-action-button-size;
-  border-radius: $border-radius-sm;
-  border: $chart-border-width solid var(--atomix-primary-border-subtle);
-  background-color: transparent;
-  color: var(--atomix-secondary-text-emphasis);
-  cursor: pointer;
-  transition: all $chart-transition-duration $chart-transition-timing;
-  position: relative;
-  overflow: hidden;
-
-  // Enhanced button styling
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--atomix-primary-bg-subtle);
-    opacity: 0;
-    transition: opacity $chart-transition-duration $chart-transition-timing;
-  }
-
-  svg {
-    position: relative;
-    z-index: 1;
-    transition: transform $chart-transition-duration $chart-transition-timing;
-  }
-
-  &:hover {
-    background-color: var(--atomix-primary-bg-subtle);
-    color: var(--atomix-primary-text-emphasis);
-    border-color: var(--atomix-primary-border-subtle);
-    transform: translateY(-1px);
-
-    &::before {
-      opacity: 1;
-    }
-
-    svg {
-      transform: scale(1.1);
-    }
-  }
-
-  &:focus-visible {
-    @include component.focus-ring;
-  }
-
-  &:active {
-    transform: translateY(1px);
-
-    svg {
-      transform: scale(0.95);
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-.c-chart__export-group {
-  position: relative;
-  display: inline-flex;
-}
-
-.c-chart__export-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: map.get($spacing-sizes, 1);
-  background: var(--atomix-primary-bg-default);
-  border: $chart-border-width solid var(--atomix-primary-border-subtle);
-  border-radius: $border-radius-md;
-  box-shadow: $box-shadow-lg;
-  backdrop-filter: blur($chart-tooltip-backdrop-blur);
-  z-index: 1000;
-  min-width: map.get($spacing-sizes, 32);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-8px);
-  transition: all $chart-transition-duration $chart-transition-timing;
-
-  .c-chart__export-group:hover & {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-}
-
-.c-chart__export-option {
-  display: block;
-  width: 100%;
-  padding: map.get($spacing-sizes, 2) map.get($spacing-sizes, 3);
-  border: none;
-  background: transparent;
-  color: var(--atomix-primary-text-emphasis);
-  font-size: $font-size-sm;
-  text-align: left;
-  cursor: pointer;
-  transition: background-color $chart-transition-duration $chart-transition-timing;
-
-  &:hover {
-    background-color: var(--atomix-primary-bg-subtle);
-  }
-
-  &:first-child {
-    border-radius: $border-radius-md $border-radius-md 0 0;
-  }
-
-  &:last-child {
-    border-radius: 0 0 $border-radius-md $border-radius-md;
-  }
-
-  &:only-child {
-    border-radius: $border-radius-md;
-  }
-}
-
-.c-chart__content {
-  flex: 1;
-  position: relative;
-  padding: var(--chart-padding);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: map.get($spacing-sizes, 32); // 128px
-  container-type: inline-size;
-
-  // Enhanced background pattern
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: radial-gradient(
-      circle at 1px 1px,
-      var(--atomix-primary-border-subtle) 1px,
-      transparent 0
-    );
-    background-size: $chart-pattern-size $chart-pattern-size;
-    opacity: $chart-pattern-opacity;
-    pointer-events: none;
-    z-index: 0;
-  }
-
-  // Subtle 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%
-    );
-    pointer-events: none;
-    z-index: 1;
-  }
-}
-
-.c-chart__canvas {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  border-radius: $border-radius-sm;
-  z-index: 2;
-
-  // Smooth rendering for SVG elements
-  svg {
-    width: 100%;
-    height: 100%;
-    shape-rendering: geometricPrecision;
-    text-rendering: optimizeLegibility;
-    image-rendering: -webkit-optimize-contrast;
-    image-rendering: crisp-edges;
-  }
-
-  // Enhanced canvas styling
-  canvas {
-    width: 100%;
-    height: 100%;
-    image-rendering: -webkit-optimize-contrast;
-    image-rendering: crisp-edges;
-  }
-}
-
-.c-chart__legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: map.get($spacing-sizes, 3);
-  padding: var(--chart-padding);
-  border-bottom: $chart-border-width solid var(--atomix-brand-border-subtle);
-  z-index: 2;
-
-  @include chart-glassmorphism();
-  @include chart-gradient-border();
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: var(--chart-padding);
-    right: var(--chart-padding);
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--atomix-brand-border-subtle), transparent);
-  }
-}
-
-.c-chart__legend-item {
-  display: flex;
-  align-items: center;
-  gap: map.get($spacing-sizes, 2);
-  cursor: pointer;
-  padding: map.get($spacing-sizes, 2) map.get($spacing-sizes, 3);
-  border-radius: $border-radius-md;
-  border: $chart-border-width solid transparent;
-  background-color: transparent;
-  transition: all $chart-transition-duration $chart-transition-timing;
-  user-select: none;
-  position: relative;
-  overflow: hidden;
-
-  // Enhanced interaction states
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--atomix-secondary-bg-subtle);
-    opacity: 0;
-    transition: opacity $chart-transition-duration $chart-transition-timing;
-  }
-
-  &:hover {
-    background-color: var(--atomix-secondary-bg-subtle);
-    border-color: var(--atomix-primary-border-subtle);
-    transform: translateY(-1px);
-    box-shadow: $box-shadow-sm;
-
-    &::before {
-      opacity: 1;
-    }
-  }
-
-  &:focus-visible {
-    @include component.focus-ring;
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-
-  // Enhanced visibility states
-  &[data-visible='false'] {
-    opacity: 0.4;
-    filter: grayscale(60%);
-
-    .c-chart__legend-label {
-      text-decoration: line-through;
-    }
-
-    .c-chart__legend-color {
-      opacity: 0.3;
-      filter: grayscale(100%);
-    }
-  }
-
-  &[data-highlighted='true'] {
-    background-color: var(--atomix-primary-bg-subtle);
-    border-color: var(--atomix-primary-border-subtle);
-    box-shadow: $box-shadow-md;
-    transform: translateY(-2px);
-
-    .c-chart__legend-color {
-      box-shadow: 0 0 0 2px var(--atomix-primary-border-subtle);
-      transform: scale(1.1);
-    }
-  }
-
-  &[data-selected='true'] {
-    background-color: var(--chart-primary-color);
-    color: white;
-    border-color: var(--chart-primary-color);
-
-    .c-chart__legend-label {
-      color: white;
-    }
-  }
-}
-
-.c-chart__legend-color {
-  width: $chart-legend-color-size;
-  height: $chart-legend-color-size;
-  border-radius: $border-radius-sm;
-  border: $chart-border-width solid var(--atomix-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;
-
-  // Enhanced glow effect
-  &::after {
-    content: '';
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    right: -1px;
-    bottom: -1px;
-    border-radius: inherit;
-    background: inherit;
-    filter: blur(2px);
-    opacity: 0.3;
-    z-index: -1;
-  }
-
-  // Pattern support for accessibility
-  &[data-pattern='dots']::before {
-    content: '';
-    position: absolute;
-    inset: 1px;
-    background-image: radial-gradient(circle at 2px 2px, currentColor 1px, transparent 1px);
-    background-size: 4px 4px;
-    border-radius: inherit;
-  }
-
-  &[data-pattern='stripes']::before {
-    content: '';
-    position: absolute;
-    inset: 1px;
-    background-image: repeating-linear-gradient(
-      45deg,
-      currentColor 0px,
-      currentColor 1px,
-      transparent 1px,
-      transparent 3px
-    );
-    border-radius: inherit;
-  }
-}
-
-.c-chart__legend-label {
-  color: var(--atomix-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;
-}
-
-.c-chart__tooltip {
-  position: absolute;
-  @include chart-glassmorphism();
-  @include chart-gradient-border();
-  border-radius: $border-radius-lg;
-  padding: map.get($spacing-sizes, 3) map.get($spacing-sizes, 4);
-  box-shadow: $box-shadow-xl;
-  font-size: $font-size-sm;
-  color: var(--atomix-primary-text-emphasis);
-  pointer-events: none;
-  z-index: 1070;
-  max-width: map.get($spacing-sizes, 64);
-  min-width: map.get($spacing-sizes, 32);
-  transition: all $chart-transition-duration $chart-transition-timing;
-
-  // Enhanced visibility with smooth animation
-  &[data-visible='true'] {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-
-  // Enhanced arrow pointer
-  &::before {
-    content: '';
-    position: absolute;
-    top: -6px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid var(--atomix-primary-border-subtle);
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: -5px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-bottom: 5px solid var(--atomix-primary-bg-subtle);
-  }
-
-  // Position variants
-  &[data-position='top'] {
-    transform: translateY(-8px) scale(0.95);
-
-    &::before {
-      top: auto;
-      bottom: -6px;
-      border-bottom: none;
-      border-top: 6px solid var(--atomix-primary-border-subtle);
-    }
-
-    &::after {
-      top: auto;
-      bottom: -5px;
-      border-bottom: none;
-      border-top: 5px solid var(--atomix-primary-bg-subtle);
-    }
-  }
-
-  &[data-position='left'] {
-    transform: translateX(-8px) scale(0.95);
-
-    &::before {
-      top: 50%;
-      left: auto;
-      right: -6px;
-      transform: translateY(-50%);
-      border-bottom: 6px solid transparent;
-      border-top: 6px solid transparent;
-      border-left: 6px solid var(--atomix-primary-border-subtle);
-      border-right: none;
-    }
-
-    &::after {
-      top: 50%;
-      left: auto;
-      right: -5px;
-      transform: translateY(-50%);
-      border-bottom: 5px solid transparent;
-      border-top: 5px solid transparent;
-      border-left: 5px solid var(--atomix-primary-bg-subtle);
-      border-right: none;
-    }
-  }
-
-  &[data-position='right'] {
-    transform: translateX(8px) scale(0.95);
-
-    &::before {
-      top: 50%;
-      left: -6px;
-      right: auto;
-      transform: translateY(-50%);
-      border-bottom: 6px solid transparent;
-      border-top: 6px solid transparent;
-      border-right: 6px solid var(--atomix-primary-border-subtle);
-      border-left: none;
-    }
-
-    &::after {
-      top: 50%;
-      left: -5px;
-      right: auto;
-      transform: translateY(-50%);
-      border-bottom: 5px solid transparent;
-      border-top: 5px solid transparent;
-      border-right: 5px solid var(--atomix-primary-bg-subtle);
-      border-left: none;
-    }
-  }
-}
-
-.c-chart__tooltip-title {
-  font-weight: $font-weight-semibold;
-  margin-bottom: map.get($spacing-sizes, 1);
-  color: var(--atomix-primary-text-emphasis);
-  font-size: $font-size-sm;
-  border-bottom: 1px solid var(--atomix-brand-border-subtle);
-  padding-bottom: map.get($spacing-sizes, 1);
-}
-
-.c-chart__tooltip-content {
-  display: flex;
-  flex-direction: column;
-  gap: map.get($spacing-sizes, 1);
-}
-
-.c-chart__tooltip-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: map.get($spacing-sizes, 2);
-
-  &:not(:last-child) {
-    padding-bottom: map.get($spacing-sizes, 1);
-    border-bottom: 1px solid var(--atomix-brand-border-subtle);
-  }
-}
-
-.c-chart__tooltip-label {
-  font-size: $font-size-xs;
-  color: var(--atomix-secondary-text-emphasis);
-  opacity: 0.8;
-  display: flex;
-  align-items: center;
-  gap: map.get($spacing-sizes, 1);
-
-  &::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: currentColor;
-    flex-shrink: 0;
-  }
-}
-
-.c-chart__tooltip-value {
-  font-weight: $font-weight-medium;
-  color: var(--atomix-primary-text-emphasis);
-  font-size: $font-size-sm;
-  font-variant-numeric: tabular-nums;
-}
-
-.c-chart__axis {
-  position: relative;
-  z-index: 55;
-  &.c-chart__axis--x {
-    text-anchor: middle;
-    dominant-baseline: hanging;
-  }
-
-  &.c-chart__axis--y {
-    text-anchor: end;
-    dominant-baseline: middle;
-  }
-}
-
-.c-chart__axis-line {
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 1;
-  opacity: 0.6;
-  transition: opacity $chart-transition-duration $chart-transition-timing;
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-.c-chart__axis-tick-line {
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 1;
-  opacity: 0.4;
-  transition: opacity $chart-transition-duration $chart-transition-timing;
-
-  &:hover {
-    opacity: 0.6;
-  }
-}
-
-.c-chart__axis-label {
-  font-size: $font-size-xs;
-  font-weight: $font-weight-medium;
-  fill: var(--atomix-secondary-text-emphasis);
-  text-anchor: middle;
-}
-
-.c-chart__grid {
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 0.5;
-  stroke-dasharray: 2, 4;
-  opacity: 0.2;
-  transition: opacity $chart-transition-duration $chart-transition-timing;
-
-  &.c-chart__grid--major {
-    stroke-width: 1;
-    stroke-dasharray: none;
-    opacity: 0.4;
-  }
-
-  &.c-chart__grid--minor {
-    opacity: 0.1;
-  }
-
-  &.c-chart__grid--zero {
-    stroke-width: 1.5;
-    stroke-dasharray: none;
-    opacity: 0.6;
-    stroke: var(--atomix-primary-border-subtle);
-  }
-
-  // Interactive grid
-  &:hover {
-    opacity: 0.6;
-  }
-}
-
-.c-chart__data-point {
-  cursor: pointer;
-  transition: all $chart-transition-duration $chart-transition-timing !important;
-
-  &:hover {
-    opacity: 0.8;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--atomix-primary-border-subtle);
-    outline-offset: 2px;
-  }
-
-  &:active {
-    transform: none;
-  }
-
-  // Enhanced interaction states
-  &[data-highlighted='true'] {
-    transform: scale(1.2);
-    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
-    z-index: 10;
-  }
-
-  &[data-selected='true'] {
-    stroke: var(--atomix-primary-border-subtle);
-    stroke-width: 2;
-    filter: drop-shadow(0 0 0 2px var(--atomix-primary-border-subtle));
-  }
-
-  &[data-animated='true'] {
-    @include chart-data-animation('scale');
-  }
-}
-
-.c-chart__loading {
-  @include chart-data-animation('fade');
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: map.get($spacing-sizes, 4);
-  color: var(--atomix-secondary-text-emphasis);
-  font-size: $font-size-sm;
-  min-height: map.get($spacing-sizes, 32);
-}
-
-.c-chart__loading-spinner {
-  width: $chart-loading-spinner-size;
-  height: $chart-loading-spinner-size;
-  border: 3px solid var(--atomix-primary-border-subtle);
-  border-top: 3px solid var(--atomix-primary-text-emphasis);
-  border-radius: 50%;
-  animation: chart-spin 1.2s $chart-transition-timing infinite;
-  position: relative;
-
-  // Enhanced loading spinner with gradient
-  &::after {
-    content: '';
-    position: absolute;
-    top: -3px;
-    left: -3px;
-    right: -3px;
-    bottom: -3px;
-    border-radius: 50%;
-    background: conic-gradient(
-      from 0deg,
-      transparent,
-      var(--atomix-primary-border-subtle),
-      transparent
-    );
-    mask: radial-gradient(circle, transparent 65%, black 66%);
-    animation: chart-spin 0.8s linear infinite reverse;
-  }
-}
-
-.c-chart__loading-text {
-  font-weight: $font-weight-medium;
-  opacity: 0.8;
-  animation: chart-pulse 2s ease-in-out infinite;
-}
-
-.c-chart__error {
-  @include chart-data-animation('fade');
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: map.get($spacing-sizes, 3);
-  color: var(--atomix-error-text-emphasis);
-  font-size: $font-size-sm;
-  text-align: center;
-  padding: map.get($spacing-sizes, 8);
-  min-height: map.get($spacing-sizes, 32);
-  background-color: var(--atomix-error-bg-subtle);
-  border-radius: $border-radius-md;
-  border: $chart-border-width solid var(--atomix-error-border-subtle);
-}
-
-.c-chart__error-icon {
-  width: $chart-error-icon-size;
-  height: $chart-error-icon-size;
-  border-radius: 50%;
-  background-color: var(--atomix-error-bg-emphasis);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--atomix-error-text-emphasis);
-  font-size: map.get($spacing-sizes, 6);
-  animation: chart-pulse 2s ease-in-out infinite;
-}
-
-.c-chart__error-content {
-  display: flex;
-  flex-direction: column;
-  gap: map.get($spacing-sizes, 2);
-}
-
-.c-chart__error-message {
-  font-weight: $font-weight-medium;
-  margin-bottom: map.get($spacing-sizes, 2);
-}
-
-.c-chart__error-details {
-  font-size: $font-size-xs;
-  opacity: 0.8;
-  line-height: 1.4;
-}
-
-.c-chart__empty {
-  @include chart-data-animation('fade');
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: map.get($spacing-sizes, 4);
-  color: var(--atomix-secondary-text-emphasis);
-  font-size: $font-size-sm;
-  text-align: center;
-  padding: map.get($spacing-sizes, 8);
-  min-height: map.get($spacing-sizes, 32);
-  opacity: 0.6;
-}
-
-.c-chart__empty-icon {
-  width: $chart-empty-icon-size;
-  height: $chart-empty-icon-size;
-  opacity: 0.4;
-  font-size: map.get($spacing-sizes, 8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.c-chart__empty-message {
-  font-weight: $font-weight-medium;
-}
-
-.c-chart__empty-details {
-  font-size: $font-size-xs;
-  opacity: 0.8;
-  line-height: 1.4;
-}
-
-// Chart Type Specific Styles
-// =============================================================================
-
-// Line Chart
-.c-chart--line {
-  .c-chart__canvas {
-    svg {
-      width: 100%;
-      height: 100%;
-      overflow: visible;
-    }
-
-    .line-path {
-      fill: none;
-      stroke-width: 2.5;
-      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));
-
-      &:hover {
-        stroke-width: 3.5;
-        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-      }
-
-      // Animated path drawing
-      stroke-dasharray: 1000;
-      stroke-dashoffset: 1000;
-      animation: chart-draw-line 2s ease-out forwards;
-
-      // Gradient stroke support
-      &[data-gradient='true'] {
-        stroke: url(#lineGradient);
-      }
-    }
-
-    .area-path {
-      opacity: 0.15;
-      transition: opacity $chart-transition-duration $chart-transition-timing;
-
-      &:hover {
-        opacity: 0.25;
-      }
-
-      // Gradient fill support
-      &[data-gradient='true'] {
-        fill: url(#areaGradient);
-      }
-    }
-
-    .data-point {
-      r: 4;
-      transition: all $chart-transition-duration $chart-transition-timing;
-      cursor: pointer;
-
-      &:hover {
-        r: 6;
-        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
-      }
-
-      &[data-highlighted='true'] {
-        r: 8;
-        stroke-width: 3;
-      }
-    }
-
-    // Line chart specific patterns
-    .trend-line {
-      stroke-dasharray: 5, 5;
-      opacity: 0.7;
-      animation: chart-dash-flow 2s linear infinite;
-    }
-  }
-}
-
-// Area Chart
-.c-chart--area {
-  .c-chart__canvas {
-    .area-path {
-      opacity: 0.3;
-      transition: opacity $chart-transition-duration $chart-transition-timing;
-
-      // Enhanced gradient fill animation
-      animation: chart-area-fade 1.5s ease-out;
-
-      &:hover {
-        opacity: 0.45;
-      }
-
-      // Multiple area support
-      &[data-stacked='true'] {
-        mix-blend-mode: multiply;
-      }
-    }
-
-    .line-path {
-      stroke-width: 2;
-      opacity: 0.9;
-      transition: all $chart-transition-duration $chart-transition-timing;
-
-      &:hover {
-        stroke-width: 3;
-        opacity: 1;
-      }
-    }
-  }
-}
-
-// Bar Chart
-.c-chart--bar {
-  .c-chart__canvas {
-    .bar {
-      transition: all $chart-transition-duration $chart-transition-timing;
-      cursor: pointer;
-      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-
-      // Enhanced animated height growth
-      animation: chart-bar-grow 0.8s ease-out;
-      transform-origin: bottom center;
-
-      &:hover {
-        opacity: 0.85;
-        transform: scaleY(1.05);
-        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
-      }
-
-      &:focus-visible {
-        outline: 2px solid var(--atomix-primary-border-subtle);
-        outline-offset: 2px;
-      }
-
-      // Gradient bar support
-      &[data-gradient='true'] {
-        fill: url(#barGradient);
-      }
-
-      // Pattern support for accessibility
-      &[data-pattern='stripes'] {
-        fill: url(#stripesPattern);
-      }
-
-      &[data-pattern='dots'] {
-        fill: url(#dotsPattern);
-      }
-    }
-
-    .bar-value-label {
-      font-size: $font-size-xs;
-      font-weight: $font-weight-medium;
-      fill: var(--atomix-primary-text-emphasis);
-      text-anchor: middle;
-      opacity: 0;
-      transition: opacity $chart-transition-duration $chart-transition-timing;
-      font-variant-numeric: tabular-nums;
-
-      .bar:hover + & {
-        opacity: 1;
-      }
-    }
-
-    // Grouped bars
-    .bar-group {
-      .bar {
-        animation-delay: calc(var(--bar-index) * 0.1s);
-      }
-    }
-  }
-}
-
-// Horizontal Bar Chart
-.c-chart--horizontal-bar {
-  .c-chart__canvas {
-    .bar {
-      transition: all $chart-transition-duration $chart-transition-timing;
-      cursor: pointer;
-      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-
-      // Enhanced animated width growth
-      animation: chart-bar-grow-horizontal 0.8s ease-out;
-      transform-origin: left center;
-
-      &:hover {
-        opacity: 0.85;
-        transform: scaleX(1.05);
-        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
-      }
-    }
-  }
-}
-
-// Pie Chart
-.c-chart--pie {
-  .c-chart__canvas {
-    .pie-slice {
-      transition: all 0.4s $chart-transition-timing;
-      stroke: var(--atomix-primary-bg-subtle);
-      stroke-width: 2;
-      cursor: pointer;
-      transform-origin: center;
-      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-
-      // Enhanced animated arc drawing
-      animation: chart-pie-draw 1.5s ease-out;
-
-      &:hover {
-        opacity: 0.9;
-        transform: scale(1.05);
-        stroke-width: 3;
-        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
-      }
-
-      &:focus-visible {
-        outline: 2px solid var(--atomix-primary-border-subtle);
-        outline-offset: 4px;
-      }
-
-      // Exploded slice support
-      &[data-exploded='true'] {
-        transform: scale(1.1) translate(var(--explode-x, 0), var(--explode-y, 0));
-      }
-    }
-
-    .pie-label {
-      font-size: $font-size-xs;
-      font-weight: $font-weight-semibold;
-      fill: var(--atomix-primary-text-emphasis);
-      text-anchor: middle;
-      pointer-events: none;
-      transition: all $chart-transition-duration $chart-transition-timing;
-      font-variant-numeric: tabular-nums;
-
-      // Enhanced label positioning
-      &[data-position='outside'] {
-        font-size: $font-size-sm;
-      }
-    }
-
-    // Pie chart specific enhancements
-    .pie-connector-line {
-      stroke: var(--atomix-secondary-text-emphasis);
-      stroke-width: 1;
-      opacity: 0.6;
-    }
-  }
-}
-
-// Donut Chart
-.c-chart--donut,
-.c-chart--doughnut {
-  .c-chart__canvas {
-    .donut-slice {
-      transition: all 0.4s $chart-transition-timing;
-      stroke: var(--atomix-primary-bg-subtle);
-      stroke-width: 2;
-      cursor: pointer;
-      transform-origin: center;
-      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-
-      // Enhanced animated arc drawing
-      animation: chart-donut-draw 1.5s ease-out;
-
-      &:hover {
-        opacity: 0.9;
-        transform: scale(1.05);
-        stroke-width: 3;
-        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
-      }
-    }
-
-    .donut-center {
-      fill: var(--atomix-primary-bg-subtle);
-      transition: fill $chart-transition-duration $chart-transition-timing;
-    }
-
-    .donut-center-label {
-      font-size: $font-size-lg;
-      font-weight: $font-weight-bold;
-      fill: var(--atomix-primary-text-emphasis);
-      text-anchor: middle;
-      dominant-baseline: central;
-      font-variant-numeric: tabular-nums;
-    }
-
-    .donut-center-sublabel {
-      font-size: $font-size-sm;
-      font-weight: $font-weight-medium;
-      fill: var(--atomix-secondary-text-emphasis);
-      text-anchor: middle;
-      dominant-baseline: central;
-    }
-
-    // Progress donut support
-    .progress-track {
-      fill: none;
-      stroke: var(--atomix-primary-border-subtle);
-      stroke-width: 8;
-      opacity: 0.2;
-    }
-
-    .progress-fill {
-      fill: none;
-      stroke: var(--chart-primary-color);
-      stroke-width: 8;
-      stroke-linecap: round;
-      transition: stroke-dasharray 1s ease-out;
-    }
-  }
-}
-
-// Scatter Plot
-.c-chart--scatter {
-  .c-chart__canvas {
-    .scatter-point {
-      r: 4;
-      transition: all $chart-transition-duration $chart-transition-timing;
-      cursor: pointer;
-      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-
-      &:hover {
-        r: 6;
-        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
-      }
-
-      &:focus-visible {
-        outline: 2px solid var(--atomix-primary-border-subtle);
-        outline-offset: 2px;
-      }
-
-      // Size-based scaling
-      &[data-size='small'] {
-        r: 2;
-      }
-      &[data-size='medium'] {
-        r: 4;
-      }
-      &[data-size='large'] {
-        r: 6;
-      }
-      &[data-size='xlarge'] {
-        r: 8;
-      }
-
-      // Cluster highlighting
-      &[data-cluster] {
-        stroke-width: 2;
-        stroke: var(--atomix-primary-border-subtle);
-      }
-    }
-
-    // Trend lines
-    .trend-line {
-      stroke: var(--atomix-secondary-text-emphasis);
-      stroke-width: 2;
-      stroke-dasharray: 5, 5;
-      opacity: 0.6;
-      fill: none;
-    }
-
-    // Confidence intervals
-    .confidence-area {
-      fill: var(--chart-primary-color);
-      opacity: 0.1;
-    }
-  }
-}
-
-// Radar Chart
-.c-chart--radar {
-  .c-chart__canvas {
-    .radar-path {
-      fill: none;
-      stroke-width: 2;
-      stroke-linejoin: round;
-      opacity: 0.8;
-      transition: all $chart-transition-duration $chart-transition-timing;
-
-      &:hover {
-        stroke-width: 3;
-        opacity: 1;
-      }
-    }
-
-    .radar-area {
-      opacity: 0.1;
-      transition: opacity $chart-transition-duration $chart-transition-timing;
-
-      &:hover {
-        opacity: 0.2;
-      }
-    }
-
-    .radar-point {
-      r: 3;
-      transition: all $chart-transition-duration $chart-transition-timing;
-
-      &:hover {
-        r: 5;
-      }
-    }
-
-    // Radar grid
-    .radar-grid-line {
-      stroke: var(--atomix-primary-border-subtle);
-      stroke-width: 1;
-      opacity: 0.3;
-    }
-
-    .radar-axis-line {
-      stroke: var(--atomix-primary-border-subtle);
-      stroke-width: 1;
-      opacity: 0.5;
-    }
-
-    .radar-axis-label {
-      font-size: $font-size-xs;
-      font-weight: $font-weight-medium;
-      fill: var(--atomix-secondary-text-emphasis);
-      text-anchor: middle;
-    }
-  }
-}
-
-// Bubble Chart
-.c-chart--bubble {
-  .c-chart__canvas {
-    .bubble {
-      transition: all 0.4s $chart-transition-timing;
-      cursor: pointer;
-      opacity: 0.8;
-      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-
-      &:hover {
-        opacity: 1;
-        transform: scale(1.1);
-        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
-      }
-
-      // Size animation
-      animation: chart-bubble-grow 1s ease-out;
-
-      // Bubble with gradient
-      &[data-gradient='true'] {
-        fill: url(#bubbleGradient);
-      }
-    }
-
-    // Bubble size legend
-    .size-legend {
-      .legend-bubble {
-        opacity: 0.6;
-        stroke: var(--atomix-primary-border-subtle);
-        stroke-width: 1;
-      }
-    }
-  }
-}
-
-// Candlestick Chart
-.c-chart--candlestick {
-  .c-chart__canvas {
-    .candlestick {
-      transition: all $chart-transition-duration $chart-transition-timing;
-      cursor: pointer;
-
-      &:hover {
-        opacity: 0.8;
-        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-      }
-
-      // Bullish candle
-      &.bullish {
-        fill: var(--atomix-success-6);
-        stroke: var(--atomix-success-7);
-      }
-
-      // Bearish candle
-      &.bearish {
-        fill: var(--atomix-error-6);
-        stroke: var(--atomix-error-7);
-      }
-
-      // Doji candle
-      &.doji {
-        fill: var(--atomix-neutral-6);
-        stroke: var(--atomix-neutral-7);
-      }
-    }
-
-    .wick {
-      stroke-width: 1;
-      opacity: 0.8;
-    }
-
-    // Volume bars
-    .volume-bar {
-      opacity: 0.3;
-      transition: opacity $chart-transition-duration $chart-transition-timing;
-
-      &:hover {
-        opacity: 0.6;
-      }
-    }
-  }
-}
-
-// Heatmap Chart
-.c-chart--heatmap {
-  .c-chart__canvas {
-    .heatmap-cell {
-      transition: all $chart-transition-duration $chart-transition-timing;
-      cursor: pointer;
-      stroke: var(--atomix-primary-bg-subtle);
-      stroke-width: 1;
-
-      &:hover {
-        stroke-width: 2;
-        stroke: var(--atomix-primary-border-subtle);
-        filter: brightness(1.1);
-      }
-
-      // Intensity levels
-      &[data-intensity='low'] {
-        opacity: 0.3;
-      }
-      &[data-intensity='medium'] {
-        opacity: 0.6;
-      }
-      &[data-intensity='high'] {
-        opacity: 0.9;
-      }
-    }
-
-    .heatmap-label {
-      font-size: $font-size-xs;
-      font-weight: $font-weight-medium;
-      fill: var(--atomix-primary-text-emphasis);
-      text-anchor: middle;
-      dominant-baseline: central;
-      pointer-events: none;
-    }
-  }
-}
-
-// Animations
-// =============================================================================
-@keyframes chart-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes chart-shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-
-@keyframes chart-pulse {
-  0%,
-  100% {
-    opacity: 0.8;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes chart-draw-line {
-  0% {
-    stroke-dashoffset: 1000;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes chart-area-fade {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0.3;
-  }
-}
-
-@keyframes chart-bar-grow {
-  0% {
-    transform: scaleY(0);
-  }
-  100% {
-    transform: scaleY(1);
-  }
-}
-
-@keyframes chart-bar-grow-horizontal {
-  0% {
-    transform: scaleX(0);
-  }
-  100% {
-    transform: scaleX(1);
-  }
-}
-
-@keyframes chart-pie-draw {
-  0% {
-    stroke-dasharray: 0 628;
-  }
-  100% {
-    stroke-dasharray: 628 628;
-  }
-}
-
-@keyframes chart-donut-draw {
-  0% {
-    stroke-dasharray: 0 628;
-  }
-  100% {
-    stroke-dasharray: 628 628;
-  }
-}
-
-@keyframes chart-fade-in {
-  0% {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes chart-scale-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes chart-slide-in {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes chart-bubble-grow {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes chart-dash-flow {
-  0% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: 10;
-  }
-}
-
-@keyframes chart-glow {
-  0%,
-  100% {
-    filter: drop-shadow(0 0 5px currentColor);
-  }
-  50% {
-    filter: drop-shadow(0 0 15px currentColor);
-  }
-}
-
-// Responsive Design
-// =============================================================================
-
-// Container queries for modern responsive design
-@container (max-width: 600px) {
-  .c-chart {
-    --chart-padding: #{map.get($spacing-sizes, 3)};
-
-    .c-chart__header {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: map.get($spacing-sizes, '2');
-    }
-
-    .c-chart__toolbar {
-      width: 100%;
-      justify-content: flex-end;
-    }
-
-    .c-chart__legend {
-      flex-direction: column;
-      gap: map.get($spacing-sizes, '2');
-    }
-
-    .c-chart__legend-item {
-      justify-content: space-between;
-      width: 100%;
-    }
-  }
-}
-
-@container (max-width: 400px) {
-  .c-chart {
-    --chart-padding: #{map.get($spacing-sizes, '2')};
-
-    .c-chart__title {
-      font-size: $font-size-md;
-      margin-bottom: map.get($spacing-sizes, 1);
-    }
-
-    .c-chart__subtitle {
-      font-size: $font-size-xs;
-    }
-
-    .c-chart__action {
-      width: map.get($spacing-sizes, 6);
-      height: map.get($spacing-sizes, 6);
-    }
-  }
-}
-
-// Large screens (desktops)
-@media (min-width: 1200px) {
-  .c-chart--lg {
-    min-height: map.get($spacing-sizes, 90); // 360px
-  }
-
-  .c-chart--xl {
-    min-height: map.get($spacing-sizes, 90); // 360px
-  }
-
-  .c-chart__title {
-    font-size: $h4-font-size;
-  }
-
-  .c-chart__legend {
-    padding: map.get($spacing-sizes, 6);
-  }
-
-  // Enhanced hover effects on larger screens
-  .c-chart:hover {
-    transform: translateY(-2px);
-  }
-}
-
-// Medium screens (tablets)
-@media (max-width: 1024px) {
-  .c-chart {
-    min-height: map.get($spacing-sizes, '44'); // 176px
-  }
-
-  .c-chart--sm {
-    min-height: map.get($spacing-sizes, '32'); // 128px
-  }
-
-  .c-chart--lg {
-    min-height: map.get($spacing-sizes, '64'); // 256px
-  }
-
-  .c-chart--xl {
-    min-height: map.get($spacing-sizes, '72'); // 288px
-  }
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 4);
-  }
-
-  .c-chart__content {
-    padding: map.get($spacing-sizes, 4);
-  }
-
-  .c-chart__legend {
-    padding: map.get($spacing-sizes, 3);
-    gap: map.get($spacing-sizes, 2);
-  }
-
-  .c-chart__toolbar {
-    gap: map.get($spacing-sizes, 1);
-  }
-
-  .c-chart__action {
-    width: map.get($spacing-sizes, 7);
-    height: map.get($spacing-sizes, 7);
-  }
-}
-
-// Small screens (large phones)
-@media (max-width: 768px) {
-  .c-chart {
-    min-height: map.get($spacing-sizes, '40'); // 160px
-    border-radius: $border-radius-md;
-  }
-
-  .c-chart--sm {
-    min-height: map.get($spacing-sizes, '28'); // 112px
-  }
-
-  .c-chart--lg {
-    min-height: map.get($spacing-sizes, '56'); // 224px
-  }
-
-  .c-chart--xl {
-    min-height: map.get($spacing-sizes, '64'); // 256px
-  }
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 3);
-    flex-direction: column;
-    align-items: flex-start;
-    gap: map.get($spacing-sizes, 2);
-  }
-
-  .c-chart__content {
-    padding: map.get($spacing-sizes, 3);
-  }
-
-  .c-chart__legend {
-    padding: map.get($spacing-sizes, 3);
-    gap: map.get($spacing-sizes, 2);
-    flex-direction: column;
-  }
-
-  .c-chart__legend-item {
-    padding: map.get($spacing-sizes, 2);
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .c-chart__toolbar {
-    width: 100%;
-    justify-content: flex-end;
-  }
-
-  .c-chart__tooltip {
-    max-width: map.get($spacing-sizes, 48); // 192px
-    font-size: $font-size-xs;
-  }
-
-  .pie-slice:hover,
-  .donut-slice:hover {
-    transform: scale(1.02);
-  }
-}
-
-// Extra small screens (small phones)
-@media (max-width: 480px) {
-  .c-chart {
-    min-height: map.get($spacing-sizes, 36); // 144px
-    border-radius: $border-radius-sm;
-  }
-
-  .c-chart--sm {
-    min-height: map.get($spacing-sizes, 24); // 96px
-  }
-
-  .c-chart--lg {
-    min-height: map.get($spacing-sizes, 48); // 192px
-  }
-
-  .c-chart--xl {
-    min-height: map.get($spacing-sizes, 56); // 224px
-  }
-
-  .c-chart__title {
-    font-size: $font-size-md;
-    margin-bottom: map.get($spacing-sizes, 1);
-  }
-
-  .c-chart__subtitle {
-    font-size: $font-size-xs;
-  }
-
-  .c-chart__header {
-    padding: map.get($spacing-sizes, 2);
-  }
-
-  .c-chart__content {
-    padding: map.get($spacing-sizes, 2);
-  }
-
-  .c-chart__legend {
-    padding: map.get($spacing-sizes, 2);
-    gap: map.get($spacing-sizes, 1);
-  }
-
-  .c-chart__legend-item {
-    padding: map.get($spacing-sizes, 1) map.get($spacing-sizes, 2);
-    font-size: $font-size-xs;
-  }
-
-  .c-chart__legend-color {
-    width: map.get($spacing-sizes, 2);
-    height: map.get($spacing-sizes, 2);
-  }
-
-  .c-chart__toolbar {
-    flex-wrap: wrap;
-    gap: map.get($spacing-sizes, 1);
-  }
-
-  .c-chart__action {
-    width: map.get($spacing-sizes, 6);
-    height: map.get($spacing-sizes, 6);
-    font-size: $font-size-xs;
-  }
-
-  .c-chart__tooltip {
-    max-width: calc(100vw - #{map.get($spacing-sizes, 8)});
-    padding: map.get($spacing-sizes, 2) map.get($spacing-sizes, 3);
-  }
-
-  .c-chart__axis {
-    font-size: 10px;
-  }
-
-  // Disable some animations on small screens for performance
-  .c-chart__data-point,
-  .bar,
-  .pie-slice,
-  .donut-slice {
-    transition-duration: 0.2s;
-  }
-}
-
-// Ultra-wide screens
-@media (min-width: 1600px) {
-  .c-chart--xl {
-    min-height: map.get($spacing-sizes, 90); // 360px
-  }
-
-  .c-chart--2xl {
-    min-height: map.get($spacing-sizes, 96); // 384px
-  }
-
-  .c-chart--full {
-    min-height: 50vh;
-  }
-}
-
-// Print styles
-@media print {
-  .c-chart {
-    break-inside: avoid;
-    box-shadow: none;
-    border: 1px solid #000;
-    background: white !important;
-    backdrop-filter: none;
-  }
-
-  .c-chart__loading,
-  .c-chart__error,
-  .c-chart__toolbar {
-    display: none !important;
-  }
-
-  .c-chart__title {
-    color: #000 !important;
-    background: none !important;
-    -webkit-text-fill-color: #000 !important;
-  }
-
-  .c-chart__canvas svg {
-    filter: none !important;
-  }
-
-  // Ensure chart elements are visible in print
-  .c-chart__data-point,
-  .bar,
-  .pie-slice,
-  .donut-slice {
-    stroke: #000 !important;
-    stroke-width: 1 !important;
-  }
-}
-
-// Accessibility Enhancements
-// =============================================================================
-.c-chart {
-  &:focus-visible {
-    @include component.focus-ring;
-  }
-
-  // Screen reader support
-  &[aria-hidden='true'] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  // Keyboard navigation support
-  &[tabindex]:focus {
-    outline: none;
-  }
-
-  // Enhanced keyboard navigation
-  &[data-keyboard-navigation='true'] {
-    .c-chart__data-point,
-    .bar,
-    .pie-slice,
-    .donut-slice {
-      &:focus {
-        outline: 2px solid var(--atomix-primary-border-subtle);
-        outline-offset: 2px;
-      }
-    }
-  }
-}
-
-// High contrast mode support
-@media (prefers-contrast: high) {
-  .c-chart {
-    border-width: 2px;
-    background-color: white;
-    color: black;
-    backdrop-filter: none;
-  }
-
-  .c-chart__grid {
-    stroke-width: 2;
-    opacity: 0.8;
-    stroke: black;
-  }
-
-  .c-chart__axis {
-    color: black;
-
-    .axis-line,
-    .tick-line {
-      stroke: black;
-      opacity: 1;
-    }
-  }
-
-  .c-chart__title {
-    color: black;
-    background: none;
-    -webkit-text-fill-color: black;
-  }
-
-  .c-chart__legend-item {
-    border-color: black;
-
-    &:hover {
-      background-color: #f0f0f0;
-    }
-  }
-
-  .c-chart__data-point {
-    stroke: black;
-    stroke-width: 2;
-  }
-
-  .line-path {
-    stroke: black;
-    stroke-width: 3;
-  }
-
-  .bar {
-    stroke: black;
-    stroke-width: 1;
-  }
-
-  .pie-slice,
-  .donut-slice {
-    stroke: black;
-    stroke-width: 3;
-  }
-
-  // Ensure patterns are visible
-  .c-chart__legend-color {
-    border-width: 2px;
-    border-color: black;
-  }
-}
-
-// Reduced motion preferences
-@media (prefers-reduced-motion: reduce) {
-  .c-chart {
-    transition: none;
-
-    &:hover {
-      transform: none;
-    }
-  }
-
-  .c-chart__data-point,
-  .bar,
-  .pie-slice,
-  .donut-slice,
-  .scatter-point,
-  .bubble {
-    transition: none;
-    animation: none;
-
-    &:hover {
-      transform: none;
-      animation: none;
-    }
-  }
-
-  .line-path {
-    animation: none;
-    stroke-dasharray: none;
-    stroke-dashoffset: 0;
-  }
-
-  .area-path {
-    animation: none;
-  }
-
-  .c-chart__loading-spinner {
-    animation: none;
-
-    &::after {
-      animation: none;
-    }
-  }
-
-  .c-chart__loading-text {
-    animation: none;
-  }
-
-  .c-chart__tooltip {
-    transition: none;
-    transform: none;
-    opacity: 1;
-  }
-
-  .c-chart__legend-item {
-    transition: none;
-
-    &:hover {
-      transform: none;
-    }
-  }
-
-  // Disable all chart animations
-  * {
-    animation-duration: 0s !important;
-    animation-delay: 0s !important;
-    transition-duration: 0s !important;
-    transition-delay: 0s !important;
-  }
-}
-
-// Focus management for interactive elements
-.c-chart__data-point,
-.bar,
-.pie-slice,
-.donut-slice,
-.scatter-point,
-.bubble {
-  &:focus-visible {
-    outline: 2px solid var(--atomix-primary-border-subtle);
-    outline-offset: 2px;
-  }
-}
-
-.c-chart__legend-item {
-  &:focus-visible {
-    @include component.focus-ring;
-  }
-}
-
-.c-chart__action {
-  &:focus-visible {
-    @include component.focus-ring;
-  }
-}
-
-// Touch device optimizations
-@media (hover: none) and (pointer: coarse) {
-  .c-chart__data-point,
-  .bar,
-  .pie-slice,
-  .donut-slice {
-    // Increase touch targets
-    &::after {
-      content: '';
-      position: absolute;
-      top: -#{map.get($spacing-sizes, 2)};
-      left: -#{map.get($spacing-sizes, 2)};
-      right: -#{map.get($spacing-sizes, 2)};
-      bottom: -#{map.get($spacing-sizes, 2)};
-      min-width: map.get($spacing-sizes, 8);
-      min-height: map.get($spacing-sizes, 8);
-    }
-  }
-
-  .c-chart__legend-item {
-    min-height: $chart-touch-target-size;
-    padding: map.get($spacing-sizes, 2) map.get($spacing-sizes, 3);
-  }
-
-  .c-chart__action {
-    min-width: $chart-touch-target-size;
-    min-height: $chart-touch-target-size;
-  }
-
-  // Enhanced touch feedback
-  .c-chart__data-point:active,
-  .bar:active,
-  .pie-slice:active,
-  .donut-slice:active {
-    opacity: 0.7;
-  }
-}
-
-// CSS Grid support for complex layouts
-.c-chart--grid {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-areas:
-    'header'
-    'content'
-    'legend';
-
-  .c-chart__header {
-    grid-area: header;
-  }
-
-  .c-chart__content {
-    grid-area: content;
-  }
-
-  .c-chart__legend {
-    grid-area: legend;
-  }
-
-  // Side legend layout
-  &.c-chart--legend-side {
-    grid-template-columns: 1fr auto;
-    grid-template-areas:
-      'header header'
-      'content legend';
-
-    .c-chart__legend {
-      border-top: none;
-      border-left: $chart-border-width solid var(--atomix-primary-border-subtle);
-      flex-direction: column;
-      max-width: map.get($spacing-sizes, 64);
-    }
-  }
-}
-
-// Modern CSS features
-@supports (backdrop-filter: blur(10px)) {
-  .c-chart {
-    backdrop-filter: blur($chart-backdrop-blur);
-  }
-
-  .c-chart__header {
-    backdrop-filter: blur($chart-header-backdrop-blur);
-  }
-
-  .c-chart__tooltip {
-    backdrop-filter: blur($chart-tooltip-backdrop-blur);
-  }
-}
-
-@supports (container-type: inline-size) {
-  .c-chart__content {
-    container-type: inline-size;
-  }
-}
-
-@supports (color-mix(in srgb, red, blue)) {
-  .c-chart {
-    --chart-mixed-color: color-mix(in srgb, var(--chart-primary-color) 70%, white);
-  }
-}