/* MakerX brand tokens (makerx-presentation design-tokens.md).
   Follows the reader's colour mode; data-theme="light|dark" on <html> forces one (used by previews). */
@font-face { font-family: "Manrope"; font-weight: 300; font-display: swap; src: url("/fonts/ManropeLight.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("/fonts/Manrope.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("/fonts/ManropeMedium.ttf") format("truetype"); }

:root {
  color-scheme: dark;
  --mx-black: #0e0f10;
  --mx-white: #f2f2f2;
  --mx-blue: #0f1c57;
  --mx-capital-blue: #003fb5;
  --mx-electric: #16acf2;
  --mx-magenta: #cc3a9d;
  --mx-gold: #ffc023;

  --bg: var(--mx-black);
  --backdrop: linear-gradient(135deg, var(--mx-black) 0%, #0a1230 55%, var(--mx-capital-blue) 100%);
  --fg: var(--mx-white);
  --ink: 242, 242, 242;
  --hair: 255, 255, 255;
  --muted: rgba(var(--ink), 0.7);
  --line: rgba(var(--hair), 0.16);
  --surface: rgba(var(--hair), 0.05);
  --surface-strong: rgba(var(--hair), 0.09);
  --accent: var(--mx-electric);
  --accent-2: var(--mx-magenta);
  --accent-3: var(--mx-gold);
  --logo-on-dark: block;
  --logo-on-light: none;

  --font: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff; --backdrop: #ffffff; --fg: var(--mx-black);
    --ink: 14, 15, 16; --hair: 14, 15, 16;
    --surface: #eaf1fb; --surface-strong: #dbe6f7;
    --accent: var(--mx-capital-blue); --accent-2: var(--mx-blue); --accent-3: var(--mx-capital-blue);
    --logo-on-dark: none; --logo-on-light: block;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --backdrop: #ffffff; --fg: var(--mx-black);
  --ink: 14, 15, 16; --hair: 14, 15, 16;
  --surface: #eaf1fb; --surface-strong: #dbe6f7;
  --accent: var(--mx-capital-blue); --accent-2: var(--mx-blue); --accent-3: var(--mx-capital-blue);
  --logo-on-dark: none; --logo-on-light: block;
}