/* LoneForge brand tokens
   Drop this file into any LoneForge property and build on the variables.
   Fonts: copy brand/fonts/ next to it (or point the urls at wherever you host them).
   Source of truth for the values: loneforge-site/public/assets/site.css */

@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(/assets/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"), url(/assets/fonts/archivo-latin-wdth-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  color-scheme: dark;

  /* ground + surfaces, all biased toward the accent hue */
  --lf-bg: #080c14;
  --lf-bg-2: #0a1019;
  --lf-surface: #0e1624;
  --lf-surface-2: #121c2d;
  --lf-line: #1a2536;
  --lf-line-2: #263449;

  /* ink */
  --lf-ink: #e9eff8;
  --lf-ink-2: #b9c4d6;
  --lf-muted: #7f8ca2;
  --lf-faint: #56637a;

  /* signal */
  --lf-accent: #5b9dff;      /* buttons, links, eyebrows */
  --lf-accent-2: #9cc3ff;    /* hover, highlights */
  --lf-accent-ink: #061021;  /* text on an accent button */
  --lf-ember: #ff8a3d;       /* the forge: one hot point, status, warnings. Use sparingly */
  --lf-ok: #3fd39b;          /* live / healthy */

  /* type */
  --lf-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --lf-font-body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lf-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* shape + motion */
  --lf-radius: 6px;
  --lf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The three voices. Everything on a LoneForge page is one of these. */
.lf-display { font-family: var(--lf-font-display); font-variation-settings: "wdth" 112; font-stretch: 112%; font-weight: 640; letter-spacing: -0.028em; line-height: 0.98; color: var(--lf-ink); text-wrap: balance; }
.lf-body    { font-family: var(--lf-font-body); font-weight: 400; line-height: 1.6; color: var(--lf-ink-2); }
.lf-mono    { font-family: var(--lf-font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lf-accent); font-variant-numeric: tabular-nums; }

/* Wordmark: <span class="lf-wordmark">Lone<em>Forge</em></span> */
.lf-wordmark { font-family: var(--lf-font-display); font-variation-settings: "wdth" 118; font-stretch: 118%; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lf-ink); }
.lf-wordmark em { font-style: normal; color: var(--lf-accent); }

/* Button */
.lf-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; min-height: 48px; border-radius: var(--lf-radius); background: var(--lf-accent); color: var(--lf-accent-ink); font-family: var(--lf-font-body); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; text-decoration: none; transition: transform 0.25s var(--lf-ease-out), background-color 0.2s, box-shadow 0.25s; }
.lf-btn:hover { background: var(--lf-accent-2); transform: translateY(-1px); box-shadow: 0 10px 30px -12px rgba(91, 157, 255, 0.55); }
.lf-btn.ghost { background: transparent; color: var(--lf-ink); border-color: var(--lf-line-2); }
.lf-btn.ghost:hover { background: var(--lf-surface-2); border-color: var(--lf-accent); box-shadow: none; }

/* Eyebrow with the short rule */
.lf-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.lf-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.8; }

/* Status LED */
.lf-led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lf-ok); box-shadow: 0 0 0 3px rgba(63, 211, 155, 0.15), 0 0 12px rgba(63, 211, 155, 0.5); }
.lf-led.dev { background: var(--lf-ember); box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.15), 0 0 12px rgba(255, 138, 61, 0.5); }