/* MC² site: design tokens.
 *
 * These are the launcher's own tokens, lifted from the one theme it ships
 * (Voxel, Sources/MC2/Design/Themes.swift) and the brand palette in
 * MC2Mark.swift. The site is meant to look like the app, because the app is
 * the thing being sold. See docs/DESIGN.md §8 in the MC2 repo for the rules:
 * square everything, Silkscreen for headings and kickers only, graph paper
 * over the top, moulded edges, ghosts by default, dark ink on the accent.
 */

@font-face {
  font-family: "Silkscreen";
  src: url("../assets/fonts/Silkscreen-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Silkscreen";
  src: url("../assets/fonts/Silkscreen-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Voxel. */
  --bg: #1b1f1a;
  --sidebar: #161a15;
  --surface: #242a21;
  --surface-strong: #2c3329;
  --titlebar: #20251d;
  --text: #e8ece3;
  --muted: #9aa591;
  --faint: #6f7a68;
  --accent: #8ec44f;
  --accent-deep: #79ac3f;
  --on-accent: #16200e;
  --danger: #e05151;
  --warn: #e0b93f;

  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.16);

  /* The mark. Never recolour one face. */
  --lit-top: #a8e293;
  --lit-left: #6fb85c;
  --lit-right: #457a3c;
  --dim-top: #2f4a2a;
  --wordmark: #f2f4ee;

  /* Fixed palettes the app also keeps outside the theme. */
  --modrinth: #1bd96a;
  --curseforge: #f16436;
  --t-played: #8ec44f;
  --t-invested: #5fc9c0;
  --t-devoted: #e0b34a;
  --t-legendary: #e07a4a;

  /* Moulded plastic: a bright top lip and a dark bottom lip on anything you
     press, the inverse on anything that contains. */
  --bevel: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.34);
  --recessed: inset 0 2px 0 rgba(0, 0, 0, 0.34), inset 0 -2px 0 rgba(255, 255, 255, 0.07);

  --pixel: "Silkscreen", ui-monospace, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --page: 1180px;
  --gutter: 26px;
}