/* starlight's recipe orders base before theme, but the web tokens put their
   dark overrides in base: theme (variables only) goes first so they win */
@layer theme, base, starlight, components, utilities;

@import "@astrojs/starlight-tailwind";
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

/* the web app's tokens, dark variant and utilities. static, since the other
   stylesheets here map starlight onto these variables directly */
@import "../../../web/src/theme.css" theme(static);

/* the web app's self-hosted fonts; the files land in public/fonts from
   nix/pkgs/web-static-files.nix (docs.nix preBuild, or the dev shell) */
@import "../../../web/src/fonts.css";

/* how tangled.org renders markdown. its rules sit in the components layer,
   so they win over starlight's own content styles */
@import "../../../web/src/markup.css";

@source "../../../web/src/lib/components/ui";
@source "../../../web/src/lib/components/repo";

/* preflight resets the components assume. starlight-tailwind restores only the
   border reset and the fonts, so the rest is put back here: links outside
   content take their parent's color, and native controls -- buttons above all
   -- otherwise paint from the UA, which shows up as grey chrome on components
   the app styles from scratch */
@layer base {
  a {
    color: inherit;
  }

  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }

  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
}