@use 'sass:color';

// Responsive breakpoints
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$max-width: 62rem;
$max-content-width: 42rem;

// One-off WCAG contrast fix for --red-light on dark mode
$wcag-code-on-dark: color.scale(#fb4934, $lightness: 8%);

:root {
  /* Base shades from light to dark */ 
  --light-0: #f9f5d7;
  --light-1: #fbf1c7;
  --light-2: #ebdbb2;
  --light-3: #d5c4a1;
  --light-4: #bdae93;
  --light-5: #a89984;
  --gray: #928374;
  --dark-0: #7c6f64;
  --dark-1: #665c54;
  --dark-2: #504945;
  --dark-3: #3c3836;
  --dark-4: #282828;
  --dark-5: #1d2021;

  /* Colors */
  --red: #cc241d;
  --red-light: #fb4934;
  --red-dark: #9d0006;
  --green: #98971a;
  --green-light: #b8bb26;
  --green-dark: #797403;
  --yellow: #d79921;
  --yellow-light: #fabd2f;
  --yellow-dark: #b57614;
  --blue: #458588;
  --blue-light: #83a598;
  --blue-dark: #076678;
  --purple: #b16286;
  --purple-light: #d3869b;
  --purple-dark: #8f3f71;
  --aqua: #689d6a;
  --aqua-light: #8ec07c;
  --aqua-dark: #427b58;
  --orange: #d65d0e;
  --orange-light: #fe8019;
  --orange-dark: #af3a03;

  /* Misc global variables */
  --body-font: "Jost", "Arial", sans-serif;
  --body-font-size: 17px;
  --body-line-height: 1.6;
  --code-font: "OfficeCodePro", "Courier New", "Courier", monospace;
  --border-radius: .25rem;
  --spacer: 1rem;
  --spacer-2: calc(var(--spacer) * 1.5);
  --spacer-3: calc(var(--spacer) * 3);
  --scrollbar-color: var(--contrast-low) var(--muted);

  /* Light theme specific contrast and colors */
  --contrast-high: var(--dark-5);
  --contrast-med: var(--dark-4);
  --contrast-med-low: var(--dark-2);
  --contrast-wcag: var(--dark-1);
  --contrast-low: var(--light-3);
  --muted: var(--light-2);
  --background: var(--light-1);
  --none-more-background: var(--light-0);

  --text-highlight-bg: var(--purple-light);
  --alert: var(--purple-light);
  --quote-color: var(--blue-dark);
  --quote-accent: var(--blue);
  --code-color: var(--red-dark);
  --code-color-wcag: var(--red-dark);
}

/* Dark theme specific contrast and colors */
@media (prefers-color-scheme: dark) {
  :root {
    --contrast-high: var(--light-1);
    --contrast-med: var(--light-2);
    --contrast-med-low: var(--light-3);
    --contrast-wcag: var(--light-5);
    --contrast-low: var(--dark-2);
    --muted: var(--dark-3);
    --background: var(--dark-4);
    --none-more-background: var(--dark-5);

    --text-highlight-bg: var(--yellow);
    --alert: var(--yellow);
    --quote-color: var(--blue-light);
    --quote-accent: var(--blue);
    --code-color: var(--red-light);
    --code-color-wcag: #{$wcag-code-on-dark};
  }
}