/* musketier-ui tokens: gruvbox at medium contrast, dark or light after the
   system setting. Link before musketier-ui.css; the slides link only this. */

/* Declared first: below every unlayered rule of an app, and the elements
   below the components. */
@layer musketier-ui.base, musketier-ui.components;

/* Served from the app's own origin, as a CSP of 'self' requires. Only the
   upright cuts: nothing sets italic, and the browser slants emphasis. */
@font-face {
  font-family: "Commit Mono";
  src: url("fonts/CommitMonoV143-VF.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer musketier-ui.base {
  /* Every colour is light-dark(light, dark): the scheme in effect where it is
     used picks one, so .scheme-light/.scheme-dark can pin a subtree. */
  :root {
    color-scheme: dark light;

    --mono: "Commit Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
      Consolas, monospace;
    --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-xs: 0.72rem;
    --fs-sm: 0.78rem;
    --fs-ui: 0.86rem;

    /* Sharp corners and thin rules, one scale for everything. */
    --r: 3px;
    --r-sm: 2px;
    --rule: 1px;

    --bg: light-dark(#fbf1c7, #282828);
    --bg-deep: light-dark(#f2e5bc, #1d2021);
    --fg: light-dark(#3c3836, #ebdbb2);
    --muted: light-dark(#7c6f64, #a89984);
    --line: light-dark(#e0d3ab, #3c3836);
    --line-strong: light-dark(#d5c4a1, #504945);
    --surface: light-dark(#fbf7e4, #32302f);
    --surface-raised: light-dark(#f2e5bc, #3c3836);

    --accent: light-dark(#427b58, #8ec07c);
    --accent-dim: light-dark(#4c7a5d, #689d6a);
    --on-accent: light-dark(#fbf1c7, #1d2021);

    /* The rest of gruvbox's accents: tones, and colours an app assigns. */
    --red: light-dark(#9d0006, #fb4934);
    --yellow: light-dark(#b57614, #fabd2f);
    --green: light-dark(#79740e, #b8bb26);
    --blue: light-dark(#076678, #83a598);
    --purple: light-dark(#8f3f71, #d3869b);
    --aqua: light-dark(#427b58, #8ec07c);
    --orange: light-dark(#af3a03, #fe8019);

    --raster-ink: light-dark(
      color-mix(in srgb, #3c3836 15.3%, transparent),
      color-mix(in srgb, #ebdbb2 9.5%, transparent)
    );
    --shadow-ink: light-dark(rgb(60 56 54 / 0.18), rgb(0 0 0 / 0.35));
    --shadow: 0 8px 24px var(--shadow-ink);
  }

  .scheme-light { color-scheme: light; }
  .scheme-dark { color-scheme: dark; }
}