duckquill/sass/_variables.scss

@use "sass:color";

$accent-color: #ff7800;
$accent-color-20: color.scale($accent-color, $alpha: -80%);

$crt-bg: radial-gradient(
  color.scale($accent-color, $lightness: -80%),
  color.scale($accent-color, $lightness: -90%)
);

$bg-l: color.mix($accent-color, rgb(250, 250, 250), 10%);
$bg-d: color.mix($accent-color, rgb(11, 11, 11), 5%);

$glow:
  0 0 0 1px color.scale($accent-color, $alpha: -95%),
  0 2px 6px 2px color.scale($accent-color, $alpha: -95%),
  0 4px 24px 4px color.scale($accent-color, $alpha: -90%);
  
:root {
  // GENERAL SETUP
  --accent-color-20: #{$accent-color-20};
  --accent-color: #{$accent-color};
  --background: #{$bg-l};
  --border-radius-big: 1.2rem;
  --border-radius-small: 0.5rem;
  --border-radius: 0.75rem;
  --border: rgba(120, 120, 120, 0.4);
  --content-width: 720px;
  --crt-bg: #{$crt-bg};
  --text: var(--dark4);

  // CUSTOM COLOR PALETTE
  --fg-03: rgba(0, 0, 0, 0.03);
  --fg-05: rgba(0, 0, 0, 0.05);
  --fg-07: rgba(0, 0, 0, 0.07);
  --fg-09: rgba(0, 0, 0, 0.09);
  --fg-50: rgba(0, 0, 0, 0.5);

  --orange-bg: rgba(255, 120, 0, 0.1);
  --orange-fg: rgb(255, 120, 0);
  --purple-bg: rgba(145, 65, 172, 0.1);
  --purple-fg: rgb(145, 65, 172);
  --red-bg: rgba(224, 27, 36, 0.1);
  --red-fg: rgb(224, 27, 36);
  --yellow-bg: rgba(156, 110, 3, 0.1);
  --yellow-fg: rgb(156, 110, 3);

  // CUSTOM VARIABLES
  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
    0 2px 6px 2px rgba(0, 0, 0, 0.03);
  --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
  --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
  --glow: #{$glow};

  --transition-long: 800ms;
  --transition-longer: 400ms;
  --transition: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    // GENERAL SETUP
    --background: #{$bg-d};
    --text: var(--light2);

    // CUSTOM COLOR PALETTE
    --fg-03: rgba(255, 255, 255, 0.03);
    --fg-05: rgba(255, 255, 255, 0.05);
    --fg-07: rgba(255, 255, 255, 0.07);
    --fg-09: rgba(255, 255, 255, 0.09);
    --fg-50: rgba(255, 255, 255, 0.5);

    --orange-bg: rgba(255, 190, 111, 0.1);
    --orange-fg: rgb(255, 190, 111);
    --purple-bg: rgba(220, 138, 221, 0.1);
    --purple-fg: rgb(220, 138, 221);
    --red-bg: rgba(226, 97, 81, 0.1);
    --red-fg: rgb(246, 97, 81);
    --yellow-bg: rgba(248, 228, 92, 0.1);
    --yellow-fg: rgb(248, 228, 92);
  }
}