@use 'material/material-theme' as material;
@use 'orange/orange' as *;
@use 'neutral/neutral' as *;
@use 'gray/gray' as *;
@use 'green/green' as *;
@use 'yellow/yellow' as *;
@use 'red/red' as *;
@use 'binaries/binaries' as *;

:root {
  @include material.apply-component-colors-light;
  & {
    --cdk-overlay: rgba(7, 10, 14, 0.6);

    --box-shadow: rgba(0, 0, 0, 0.15);

    --white: #{$white};
    --black: #{$black};

    --primary: #{$orange-500};
    --secondary: #{$orange-50};

    --dividers: #{$neutral-50};

    --scrollbar: #{$gray-400};

    --bg-01: #{$gray-300};
    --bg-02: #{$white};
    --bg-03: #{$white};
    --bg-04: #{$gray-50};
    --bg-05: #{$black};
    --bg-06: #{$gray-900};

    --bg-critical: #{$red-50};
    --bg-neutral: #{$orange-50};
    --bg-notification: #{$red-500};
    --bg-positive: #{$green-50};
    --bg-warning: #{$yellow-50};

    --txt-01: #{$gray-700};
    --txt-02: #{$gray-600};
    --txt-03: #{$gray-50};

    --txt-critical: #{$red-700};
    --txt-neutral: #{$orange-500};
    --txt-notification: #{$red-500};
    --txt-positive: #{$green-700};
    --txt-warning: #{$yellow-700};

    --skeletons: #{$gray-300};

    --surface-ground: #f8f9fa;
    --surface-section: #ffffff;
    --surface-card: #ffffff;
    --surface-overlay: #ffffff;
    --surface-border: #dee2e6;
    --surface-hover: #f8f9fa;
    --text-color: #495057;
    --text-color-secondary: #6c757d;
    --primary-color: $orange-500;
    --primary-color-text: #ffffff;
    --surface-0: #ffffff;
    --surface-50: #f8f9fa;
    --surface-100: #e9ecef;
    --surface-200: #dee2e6;
    --surface-300: #ced4da;
    --surface-400: #adb5bd;
    --surface-500: #6c757d;
    --surface-600: #495057;
    --surface-700: #343a40;
    --surface-800: #212529;
    --surface-900: #000000;
    --surface-950: #000000;
  }
}

[data-theme='dark'] {
  @include material.apply-component-colors-dark;
  & {
    --cdk-overlay: rgba(0, 0, 0, 0.82);
    --box-shadow: rgba(0, 0, 0, 0.15);

    --white: #{$white};
    --black: #{$black};

    --primary: #{$orange-500};
    --secondary: #{$orange-50};

    --dividers: #{$gray-800};

    --scrollbar: #{$gray-400};

    --bg-01: #{$gray-600};
    --bg-02: #{$gray-800};
    --bg-03: #{$black};
    --bg-04: #{$gray-800};
    --bg-05: #{$black};
    --bg-06: #{$gray-800};

    --bg-critical: #{$red-800};
    --bg-neutral: #{$orange-900};
    --bg-notification: #{$red-500};
    --bg-positive: #{$green-900};
    --bg-warning: #{$yellow-800};

    --txt-01: #{$gray-50};
    --txt-02: #{$gray-800};
    --txt-03: #{$gray-50};

    --txt-critical: #{$red-500};
    --txt-neutral: #{$orange-300};
    --txt-notification: #{$red-500};
    --txt-positive: #{$green-300};
    --txt-warning: #{$yellow-300};

    --skeletons: #{$gray-800};

    --surface-ground: #1a1a1a;
    --surface-section: #2d2d2d;
    --surface-card: #2d2d2d;
    --surface-overlay: #404040;
    --surface-border: #404040;
    --surface-hover: #404040;
    --text-color: #ffffff;
    --text-color-secondary: #b3b3b3;
    --primary-color: $orange-500;
    --primary-color-text: #ffffff;
    --surface-0: #1a1a1a;
    --surface-50: #2d2d2d;
    --surface-100: #404040;
    --surface-200: #525252;
    --surface-300: #737373;
    --surface-400: #a3a3a3;
    --surface-500: #d4d4d4;
    --surface-600: #e5e5e5;
    --surface-700: #f5f5f5;
    --surface-800: #fafafa;
    --surface-900: #ffffff;
    --surface-950: #ffffff;
  }
}