@use "tailwind/colors";
@use "tailwind/spacing";
@use "tailwind/text";

html {
  color-scheme: light dark;
}

/* These need switchable client-side */
:root {
  /* Foreground */
  --color-fg-base: #{colors.$slate-700};
  --color-fg-deemphasized: #{colors.$slate-600};
  --color-fg-headings: #{colors.$slate-900};

  /* Background */
  --color-bg-base: #{colors.$slate-100};
  --color-bg-raised-1: #{colors.$slate-200};
  --color-bg-raised-2: #{colors.$slate-300};

  /* Borders */
  --color-bd-base: #{colors.$slate-300};
  --color-bd-highlighted: #{colors.$slate-500};

  @media (prefers-color-scheme: dark) {
    /* Foreground */
    --color-fg-base: #{colors.$slate-300};
    --color-fg-deemphasized: #{colors.$slate-400};
    --color-fg-headings: #{colors.$slate-100};

    /* Background */
    --color-bg-base: #{colors.$slate-900};
    --color-bg-raised-1: #{colors.$slate-800};
    --color-bg-raised-2: #{colors.$slate-700};

    /* Borders */
    --color-bd-base: #{colors.$slate-700};
    --color-bd-highlighted: #{colors.$slate-500};
  }
}

@mixin heading($disable-margin: false) {
  color: var(--color-fg-headings);
  @if $disable-margin {
    margin: 0;
  }
}

@mixin heading2($disable-margin: false) {
  @include heading($disable-margin);
  font-size: text.$font-size-4xl;
  font-weight: text.$font-weight-bold;
}