@use 'sass:color';

$base_primary_color: #1967d2;

// Root variables shared by both light and dark mode.
body {
  // Site typography.
  --site-ui-fontFamily: 'Google Sans', 'Roboto', ui-sans, sans-serif;
  --site-body-fontFamily: 'Google Sans Text', 'Roboto', ui-sans, sans-serif;
  --site-code-fontFamily: 'Google Sans Mono', 'Roboto Mono', ui-monospace, monospace;
  --site-icon-fontFamily: 'Material Symbols Outlined', 'Material Symbols', 'Material Icons';

  // Site layout sizes.
  --site-header-height: 3.25rem;
  --site-subheader-height: 2.5rem;

  // Site visual hierarchy levels.
  --site-z-base: 1;
  --site-z-container: 5;
  --site-z-floating: 10;
  --site-z-side: 20;
  --site-z-subheader: 40;
  --site-z-header: 50;
  --site-z-dropdown: 100;
  --site-z-top: 1000;

  // Misc site styles.
  --site-radius: 0.45rem;
}

body {
  color-scheme: light;

  --site-outline: rgba(194, 198, 214, .75);
  --site-outline-variant: #e7e8ed;

  --site-interaction-base-values: 0 0 0;

  --site-base-bgColor: #ffffff;
  --site-base-fgColor: #212121;
  --site-base-fgColor-lighter: #{color.scale(#212121, $lightness: 20%)};
  --site-base-fgColor-alt: #6a6f71;

  --site-raised-bgColor: #edf0f2;
  --site-raised-bgColor-translucent: #{color.change(#edf0f2, $alpha: 0.1)};

  --site-primary-color: #{$base_primary_color};
  --site-accent-color: #833ef2;

  --site-primary-color-highlight: #{color.change($base_primary_color, $alpha: 0.05)};

  --site-secondaryContainer-bgColor: #c2e5ff;
  --site-secondaryContainer-fgColor: var(--site-base-fgColor);

  --site-onPrimary-color: #dcf5ff;
  --site-onPrimary-color-light: #{color.mix(#fff, #dcf5ff, 25%)};
  --site-onPrimary-color-lighter: #{color.mix(#fff, #dcf5ff, 50%)};
  --site-onPrimary-color-lightest: #{color.mix(#fff, #dcf5ff, 75%)};

  --site-inset-bgColor: #f9fafb;
  --site-inset-bgColor-translucent: rgba(237, 240, 242, 0.8);
  --site-inset-bgColor-translucent-extra: rgba(237, 240, 242, 0.2);
  --site-inset-fgColor: var(--site-base-fgColor);
  --site-inset-borderColor: #dadce0;

  // Specific UI element styles.
  --site-link-fgColor: var(--site-primary-color);
  --site-link-fgColor-active: #0553b1;

  --site-altLink-fgColor: #40c4ff;
  --site-altLink-fgColor-active: #70d3ff;

  --site-wordmark-fgColor: #4a4a4a;

  --site-chrome-bgColor: #1c2834;
  --site-chrome-borderColor: #394c60;
  --site-chrome-fgColor: #F3F4F6;

  --site-banner-bgColor: linear-gradient(139deg, #134386, #1959b3);
  --site-banner-fgColor: #fff;

  --site-card-borderColor: var(--site-outline);
  --site-filledCard-bgColor: #{color.scale($base_primary_color, $lightness: 95%)};
  --site-filledCard-fgColor: var(--site-base-fgColor);

  --site-filledButton-bgColor: var(--site-primary-color);
  --site-filledButton-fgColor: #fff;

  --site-code-highlight-bgColor: rgba(255, 245, 156, 0.8);

  --site-diagram-wrap-bgColor: #f8f9fa;

  --site-alert-info-color: #2058b7;
  --site-alert-tip-color: #0c7927;
  --site-alert-important-color: #7e5ac2;
  --site-alert-warning-color: #9e6300;
  --site-alert-error-color: #cd3434;

  &:not(.dark-mode) .dark-mode-visible {
    display: none !important;
  }

  &.dark-mode, .always-dark-mode {
    color-scheme: dark;
    --site-outline: rgba(95, 100, 119, .75);
    --site-outline-variant: #252834;

    --site-interaction-base-values: 255 255 255;

    --site-base-bgColor: #121317;
    --site-base-fgColor: #dcdcdc;
    --site-base-fgColor-lighter: #{color.scale(#dcdcdc, $lightness: -25%)};
    --site-base-fgColor-alt: #a8acad;

    --site-raised-bgColor: #1c1e27;
    --site-raised-bgColor-translucent: #{color.change(#1c1e27, $alpha: 0.1)};

    --site-primary-color: #{$base_primary_color};
    --site-accent-color: #b07fff;

    --site-primary-color-highlight: #{color.change($base_primary_color, $alpha: 0.1)};

    --site-secondaryContainer-bgColor: rgb(22 83 153);
    --site-secondaryContainer-fgColor: var(--site-base-fgColor);

    --site-onPrimary-color: #b8eafe;
    --site-onPrimary-color-light: #{color.mix(#fff, #b8eafe, 25%)};
    --site-onPrimary-color-lighter: #{color.mix(#fff, #b8eafe, 50%)};
    --site-onPrimary-color-lightest: #{color.mix(#fff, #b8eafe, 75%)};

    --site-inset-bgColor: #202731; // pub.dev uses #242b32;
    --site-inset-bgColor-translucent: rgba(32, 39, 49, 0.7);
    --site-inset-bgColor-translucent-extra: rgba(32, 39, 49, 0.2);
    --site-inset-fgColor: var(--site-base-fgColor);
    --site-inset-borderColor: #485563;

    // Specific UI element styles.
    --site-link-fgColor: #47b0f8;
    --site-link-fgColor-active: #28a3f7;

    --site-altLink-fgColor: #40c4ff;
    --site-altLink-fgColor-active: #70d3ff;

    --site-wordmark-fgColor: #fff;

    --site-chrome-bgColor: #1c2834;
    --site-chrome-borderColor: #394c60;
    --site-chrome-fgColor: #F3F4F6;

    --site-banner-bgColor: linear-gradient(139deg, #165399, #5b0fd7);
    --site-banner-fgColor: #fff;

    --site-card-borderColor: var(--site-outline);
    --site-filledCard-bgColor: var(--site-raised-bgColor);
    --site-filledCard-fgColor: var(--site-base-fgColor);

    --site-filledButton-bgColor: var(--site-primary-color);
    --site-filledButton-fgColor: #fff;

    --site-code-highlight-bgColor: rgba(164, 158, 62, 0.15);

    --site-diagram-wrap-bgColor: #c2cdd6;

    --site-alert-info-color: #439bff;
    --site-alert-tip-color: #25c04b;
    --site-alert-important-color: #ac7fff;
    --site-alert-warning-color: #cea11f;
    --site-alert-error-color: #ff5d5d;

    .opal, .opal span {
      color: var(--opal-dark-color) !important;
      font-style: var(--opal-dark-font-style) !important;
      font-weight: var(--opal-dark-font-weight) !important;
      text-decoration: var(--opal-dark-text-decoration) !important;
    }

    .light-mode-visible {
      display: none !important;
    }
  }
}
