/*
 * Fae Collective skin for the Matrix Authentication Service (auth.faecollective.org).
 * MAS styles everything with Compound design tokens (--cpd-*); this file, linked last from the
 * patched templates (~/matrix/mas/sync-templates.sh), points those tokens at STYLE.md's palette:
 * astroLab's void + brass + parchment ink, helium as the action colour, argon for focus.
 * `:root:root` outranks Compound's own `:root` / `.cpd-theme-*` blocks in every colour scheme.
 */

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fae/fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fae/fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("/fae/fonts/AtkinsonHyperlegible-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fae/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "Marcellus"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fae/fonts/Marcellus-Regular.woff2") format("woff2"); }

:root:root,
:root:root [class*="cpd-theme-"] {
  color-scheme: dark;

  /* surfaces */
  --cpd-color-theme-bg: #0A0D1C;
  --cpd-color-bg-canvas-default: #0A0D1C;
  --cpd-color-bg-subtle-secondary: #11152A;
  --cpd-color-bg-subtle-primary: #1B2140;

  /* text + icons */
  --cpd-color-text-primary: #ECE6D6;
  --cpd-color-text-secondary: #9C9AB2;
  --cpd-color-text-disabled: #6E6B82;
  --cpd-color-icon-primary: #ECE6D6;
  --cpd-color-icon-secondary: #9C9AB2;

  /* actions: helium */
  --cpd-color-bg-action-primary-rest: #F4B49C;
  --cpd-color-bg-action-primary-hovered: #F7C6B3;
  --cpd-color-bg-action-primary-pressed: #E59D83;
  --cpd-color-text-on-solid-primary: #0A0D1C;
  --cpd-color-icon-on-solid-primary: #0A0D1C;
  --cpd-color-text-action-accent: #F4B49C;
  --cpd-color-text-action-primary: #ECE6D6;
  --cpd-color-text-link-external: #B49AF2;
  --cpd-color-gradient-action-stop1: rgba(244, 180, 156, 0.24);
  --cpd-color-gradient-action-stop2: rgba(244, 180, 156, 0.12);
  --cpd-color-gradient-action-stop3: rgba(180, 154, 242, 0.08);
  --cpd-color-gradient-action-stop4: rgba(180, 154, 242, 0);

  /* borders: brass at rest, argon when focused */
  --cpd-color-border-interactive-primary: #CFA867;
  --cpd-color-border-interactive-secondary: rgba(207, 168, 103, 0.40);
  --cpd-color-border-interactive-hovered: #CFA867;
  --cpd-color-border-focused: #B49AF2;

  /* errors: neon */
  --cpd-color-text-critical-primary: #FF6A45;
  --cpd-color-icon-critical-primary: #FF6A45;
  --cpd-color-bg-critical-subtle: rgba(255, 106, 69, 0.12);

  /* type */
  --cpd-font-family-sans: "Atkinson Hyperlegible", system-ui, sans-serif;
  --cpd-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
}

body {
  background: url("/fae/background.svg") center / cover fixed, #0A0D1C;
}

/* the brass-and-spark mark above each page, and engraved-plate headings */
.layout-container::before {
  content: "";
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  background: url("/fae/mark.svg") center / contain no-repeat;
}
h1, h1.title, .title, .cpd-text-heading-lg, .cpd-text-heading-md {
  /* !important: MAS sets these through the `font` shorthand from a bundle loaded after this file */
  font-family: "Marcellus", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
}

/* Glow, per STYLE.md: a few pixels at ~40 %, only on the one thing in focus or under the pointer */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: 0 0 4px rgba(180, 154, 242, 0.45);
}
button[type="submit"]:hover,
button[type="submit"]:focus-visible {
  box-shadow: 0 0 4px rgba(244, 180, 156, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
  input, textarea, select, button { transition: box-shadow 0.15s ease; }
}