/* Fireworks UI kit for engineers: drop-in tokens and fonts.
   Source: kit/fireworks-ui-kit-for-engineers.md, sections 1 and 2.

   The fonts are licensed for Fireworks use: serve them only from Fireworks sites, and
   don't share the files outside the company.

   Two departures from the kit's block, both forced by the page this sits on:
   - The token blocks are scoped `html:root`, not `:root`. The legacy theme defines
     --fw-surface, --fw-radius-*, --fw-success and --fw-warning at `html:root`, so a
     plain `:root` would lose to it whatever the load order.
   - Each family gets one extra face for the in-between weights (501–649) the page
     still asks for (550 and 600). Without it the browser resolves 550 to Bold. The
     face is the kit's own Medium file; no weight is added. */

/* -----------  Fonts  ------------------------------------------ */
/* Sharp Serif Text */
@font-face { font-family: "Sharp Serif Text"; src: url("fonts/SharpSerifText-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Sharp Serif Text"; src: url("fonts/SharpSerifText-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sharp Serif Text"; src: url("fonts/SharpSerifText-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ABC Monument Grotesk */
@font-face { font-family: "ABC Monument Grotesk"; src: url("fonts/ABCMonumentGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Monument Grotesk"; src: url("fonts/ABCMonumentGrotesk-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "ABC Monument Grotesk"; src: url("fonts/ABCMonumentGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Monument Grotesk"; src: url("fonts/ABCMonumentGrotesk-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "ABC Monument Grotesk"; src: url("fonts/ABCMonumentGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Monument Grotesk"; src: url("fonts/ABCMonumentGrotesk-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "ABC Monument Grotesk"; src: url("fonts/ABCMonumentGrotesk-Medium.woff2") format("woff2"); font-weight: 501 649; font-style: normal; font-display: swap; }

/* ABC Monument Grotesk Semi Mono */
@font-face { font-family: "ABC Monument Grotesk Semi Mono"; src: url("fonts/ABCMonumentGroteskSemiMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Monument Grotesk Semi Mono"; src: url("fonts/ABCMonumentGroteskSemiMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Monument Grotesk Semi Mono"; src: url("fonts/ABCMonumentGroteskSemiMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Monument Grotesk Semi Mono"; src: url("fonts/ABCMonumentGroteskSemiMono-Medium.woff2") format("woff2"); font-weight: 501 649; font-style: normal; font-display: swap; }

/* Legacy family names. The page names "Inter" and "JetBrains Mono" directly in
   hundreds of inline declarations, script strings and SVG text, so these faces
   answer those names with the kit's text and mono faces. A family defined here also
   hides any copy of Inter or JetBrains Mono installed on the viewer's machine. */
@font-face { font-family: "Inter"; src: url("fonts/ABCMonumentGrotesk-Regular.woff2") format("woff2"); font-weight: 100 449; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/ABCMonumentGrotesk-Medium.woff2") format("woff2"); font-weight: 450 649; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/ABCMonumentGrotesk-Bold.woff2") format("woff2"); font-weight: 650 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/ABCMonumentGrotesk-RegularItalic.woff2") format("woff2"); font-weight: 100 449; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/ABCMonumentGrotesk-MediumItalic.woff2") format("woff2"); font-weight: 450 649; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/ABCMonumentGrotesk-BoldItalic.woff2") format("woff2"); font-weight: 650 900; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/ABCMonumentGroteskSemiMono-Regular.woff2") format("woff2"); font-weight: 100 449; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/ABCMonumentGroteskSemiMono-Medium.woff2") format("woff2"); font-weight: 450 649; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/ABCMonumentGroteskSemiMono-Bold.woff2") format("woff2"); font-weight: 650 900; font-style: normal; font-display: swap; }

/* -----------  Tokens (kit section 1)  -------------------------- */
html:root {
  /* Brand palette */
  --fw-ember: #280016;        /* core brand color, default text */
  --fw-ember-02: #4D0F31;
  --fw-ash: #F4F0EC;
  --fw-ash-02: #E2DDD8;
  --fw-ash-03: #BDB6AF;
  --fw-bloom: #FFC0E7;
  --fw-glow: #F98461;
  --fw-spark: #FFE388;
  --fw-flare: #FF0073;
  --fw-charcoal: #121212;
  --fw-white: #FFFFFF;

  /* Semantic: light mode */
  --fw-surface: #F9F7F5;          /* page background */
  --fw-surface-01: #F4F0EC;       /* cards, sidebars, code blocks */
  --fw-surface-02: #E2DDD8;       /* secondary panels, secondary buttons */
  --fw-divider: #E2DDD8;
  --fw-text: #280016;
  --fw-text-soft: #706666;        /* secondary text, captions, metadata */
  --fw-accent: #A71E7E;           /* link hover, active tab, selected state */
  --fw-accent-bg: #FFC0E7;        /* accent badges, highlights */
  --fw-button-bg: #280016;
  --fw-button-text: #FFFFFF;
  --fw-button-bg-hover: #4D0F31;
  --fw-focus-ring: #FFC0E7;

  /* Status (functional only, never decorative) */
  --fw-error: #E51D1D;
  --fw-warning: #ED5F09;
  --fw-success: #078E09;

  /* Type */
  --fw-font-display: "Sharp Serif Text", Georgia, serif;
  --fw-font-text: "ABC Monument Grotesk", Inter, system-ui, sans-serif;
  --fw-font-mono: "ABC Monument Grotesk Semi Mono", "SF Mono", Consolas, monospace;

  /* Radius */
  --fw-radius-xs: 4px;
  --fw-radius-sm: 8px;
  --fw-radius-md: 12px;
  --fw-radius-lg: 24px;
  --fw-radius-pill: 96px;

  /* Motion */
  --fw-ease: cubic-bezier(0.5, 0, 0.3, 1);

  /* Page edges: 24px on phones, scaling to 80px on wide screens */
  --fw-page-x: clamp(24px, 6vw, 80px);
}

html[data-theme="dark"]:root {
  --fw-surface: #280016;
  --fw-surface-01: #330B21;
  --fw-surface-02: #4D0F31;
  --fw-divider: #4D0F31;
  --fw-text: #F9F7F5;
  --fw-text-soft: #C9C2C2;
  --fw-accent: #FFC0E7;
  --fw-accent-bg: #A71E7E;
  --fw-button-bg: #FFFFFF;
  --fw-button-text: #280016;
  --fw-button-bg-hover: #FFC0E7;
}

body {
  background: var(--fw-surface);
  color: var(--fw-text);
  font-family: var(--fw-font-text);
}