/* =====================================================================
   FORGE — Colors, Type & Primitives
   "Raw data in. Precise, durable systems out."

   A cousin to XLBS: same paper, same rust, same Cardo voice.
   Adds a graphite accent and a precision mono for data, coordinates,
   and engineered readouts. Forge is what XLBS sounds like on a
   workbench.
   ===================================================================== */

/* Cardo — the serif voice. */
@import url("https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap");

/* JetBrains Mono — the precision voice. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Inherited from XLBS ---------- */
  --xlbs-paper:       #f4f1ea;
  --xlbs-paper-deep:  #ece7dc;
  --xlbs-paper-edge:  #ddd6c6;
  --xlbs-ink:         #282828;
  --xlbs-ink-soft:    #4a4744;
  --xlbs-ink-mute:    #676767;
  --xlbs-ink-faint:   rgba(40, 40, 40, 0.15);
  --xlbs-rust:        #c24a1f;
  --xlbs-rust-deep:   #9b3a17;
  --xlbs-rust-faint:  rgba(194, 74, 31, 0.12);

  /* ---------- New: graphite (the surveyor blue) ----------
     A muted, slightly cool ink. Used for technical labels,
     coordinate strings, schematic lines, and the single
     non-rust accent in plots and diagrams. */
  --forge-graphite:        #2f4858;
  --forge-graphite-deep:   #1f3340;
  --forge-graphite-soft:   #5b7280;
  --forge-graphite-faint:  rgba(47, 72, 88, 0.10);

  /* ---------- Workshop palette ----------
     Forge is a foundry, not a printing press. The paper's still on the
     wall for invoices, but the actual workshop is anthracite, iron,
     and a single ember. */
  --forge-anthracite:      #14161a;       /* the floor */
  --forge-anthracite-2:    #1c1f24;       /* raised surface */
  --forge-anthracite-3:    #262a31;       /* edges, cards */
  --forge-iron:            #6e7681;       /* mid text on dark */
  --forge-iron-soft:       #a4abb5;       /* secondary text on dark */
  --forge-iron-bright:     #d8dde3;       /* primary text on dark */
  --forge-bone:            #e8e3d8;       /* rare warm-paper inversion */

  --forge-ember:           #e8623a;       /* the heat — brighter rust */
  --forge-ember-deep:      #b54820;
  --forge-ember-glow:      rgba(232, 98, 58, 0.16);

  --forge-rule-dark:       rgba(255, 255, 255, 0.08);
  --forge-rule-mid:        rgba(255, 255, 255, 0.16);
  --forge-rule-bright:     rgba(255, 255, 255, 0.28);

  /* legacy blueprint kept for foundations reference */
  --forge-blueprint:       var(--forge-anthracite);
  --forge-blueprint-line:  var(--forge-rule-dark);
  --forge-blueprint-ink:   var(--forge-iron-bright);
  --forge-blueprint-mute:  var(--forge-iron-soft);

  /* ---------- Semantic roles (light/paper mode) ---------- */
  --fg-1:           var(--xlbs-ink);
  --fg-2:           var(--xlbs-ink-soft);
  --fg-3:           var(--xlbs-ink-mute);
  --fg-rule:        var(--xlbs-ink-faint);
  --fg-accent:      var(--xlbs-rust);
  --fg-accent-deep: var(--xlbs-rust-deep);
  --fg-tech:        var(--forge-graphite);
  --fg-tech-soft:   var(--forge-graphite-soft);
  --fg-tech-faint:  var(--forge-graphite-faint);
  --bg-1:           var(--xlbs-paper);
  --bg-2:           var(--xlbs-paper-deep);

  /* ---------- Typography ---------- */
  --font-serif: "Cardo", "Iowan Old Style BT", Georgia, "Times New Roman", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-tick:    0.6875rem;     /* 11px — coordinate ticks, schematic labels */
  --fs-eyebrow: 0.8125rem;     /* 13px */
  --fs-caption: 0.9375rem;     /* 15px */
  --fs-body:    1.125rem;      /* 18px */
  --fs-lead:    1.3125rem;     /* 21px */
  --fs-h4:      1.5rem;        /* 24px */
  --fs-h3:      1.75rem;       /* 28px */
  --fs-h2:      2.25rem;       /* 36px */
  --fs-h1:      2.875rem;      /* 46px */
  --fs-display: 4.25rem;       /* 68px */

  --lh-prose: 1.75;
  --lh-tight: 1.25;
  --lh-mono:  1.45;

  --track-eyebrow: 0.25em;
  --track-mono:    0.04em;
  --track-coord:   0.12em;     /* spaced-out monospace for coordinates */

  /* ---------- Motion ---------- */
  --ease-paper: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:   140ms;
  --dur-med:    280ms;

  /* ---------- Layout ---------- */
  --measure-prose: 640px;
  --measure-wide:  960px;       /* technical schedules, schematics */
  --radius-sm:     4px;
  --radius-0:      0;            /* most Forge surfaces are square */
  --space-rule:    48px;
  --grid-step:     24px;         /* the blueprint grid module */
}

/* Resets */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--xlbs-rust-faint); color: var(--fg-1); }

/* =====================================================================
   Type roles (.forge-*)
   ===================================================================== */

.forge-display {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.01em;
}
.forge-h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); }
.forge-h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.2; }
.forge-h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; }
.forge-h4 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h4); line-height: 1.3; }

.forge-lead {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-lead); color: var(--fg-2); line-height: 1.4;
}
.forge-body {
  font-family: var(--font-serif); font-size: var(--fs-body);
  line-height: var(--lh-prose); color: var(--fg-1); text-wrap: pretty;
}
.forge-caption {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--fs-caption); color: var(--fg-3);
}

/* Eyebrow — uppercase serif, the XLBS standard */
.forge-eyebrow {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--fg-3);
}

/* Mono roles — the new voice */
.forge-mono {
  font-family: var(--font-mono); font-size: 0.875rem; /* 14px */
  letter-spacing: var(--track-mono); color: var(--fg-tech);
  line-height: var(--lh-mono);
}
.forge-coord {
  font-family: var(--font-mono); font-size: var(--fs-tick);
  letter-spacing: var(--track-coord); text-transform: uppercase;
  color: var(--fg-tech-soft);
  font-feature-settings: "tnum" 1;
}
.forge-tag {
  font-family: var(--font-mono); font-size: var(--fs-tick);
  letter-spacing: var(--track-coord); text-transform: uppercase;
  color: var(--fg-tech); font-weight: 500;
}

/* =====================================================================
   Primitives
   ===================================================================== */

.forge-rule {
  border: 0; border-top: 1px solid var(--fg-rule);
  width: var(--space-rule); margin: clamp(2rem, 5vw, 3rem) auto;
}

.forge-rule--measure {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin: clamp(2rem, 5vw, 3rem) auto;
  width: 240px;
}
.forge-rule--measure::before,
.forge-rule--measure::after {
  content: ""; flex: 1; height: 1px; background: var(--fg-rule);
}

.forge-link {
  color: var(--fg-3); text-decoration: underline;
  text-decoration-color: var(--fg-rule); text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-paper),
              text-decoration-color var(--dur-fast) var(--ease-paper);
}
.forge-link:hover { color: var(--fg-accent); text-decoration-color: var(--fg-accent); }

.forge-link--tech { color: var(--fg-tech); text-decoration-color: var(--fg-tech-faint); }
.forge-link--tech:hover { color: var(--fg-accent); text-decoration-color: var(--fg-accent); }

/* =====================================================================
   Buttons
   ===================================================================== */

.forge-btn {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 11px 22px;
  background: var(--fg-accent); color: var(--xlbs-paper);
  border: 0; border-radius: var(--radius-0);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-paper);
}
.forge-btn:hover { background: var(--fg-accent-deep); }

.forge-btn--ghost {
  background: transparent; color: var(--fg-1);
  border: 1px solid var(--fg-rule);
}
.forge-btn--ghost:hover { border-color: var(--fg-accent); color: var(--fg-accent); }

.forge-btn--tech {
  background: transparent; color: var(--fg-tech);
  border: 1px solid var(--fg-tech);
}
.forge-btn--tech:hover { background: var(--fg-tech); color: var(--xlbs-paper); }

/* =====================================================================
   Form fields
   ===================================================================== */

.forge-field-label {
  display: block; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 8px;
}
.forge-input, .forge-textarea {
  width: 100%; font-family: var(--font-serif);
  font-size: 17px; line-height: 1.6; padding: 12px;
  background: transparent; border: 1px solid var(--fg-rule);
  border-radius: var(--radius-0); color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-paper);
}
.forge-textarea { resize: vertical; }
.forge-input:focus, .forge-textarea:focus { border-color: var(--fg-accent); }

/* =====================================================================
   Forge-specific: coordinate strip and spec row
   ===================================================================== */

.forge-coord-strip {
  display: flex; gap: 24px; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--fs-tick);
  letter-spacing: var(--track-coord); text-transform: uppercase;
  color: var(--fg-tech-soft);
  border-top: 1px solid var(--fg-rule);
  border-bottom: 1px solid var(--fg-rule);
  padding: 8px 0;
}
.forge-coord-strip > span { white-space: nowrap; }
.forge-coord-strip .sep { color: var(--fg-tech-faint); }

.forge-spec {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--fg-rule);
}
.forge-spec__label {
  font-family: var(--font-mono); font-size: var(--fs-tick);
  letter-spacing: var(--track-coord); text-transform: uppercase;
  color: var(--fg-tech-soft);
}
.forge-spec__value {
  font-family: var(--font-serif); font-size: var(--fs-body);
  color: var(--fg-1); text-align: right;
}
.forge-spec__value--mono {
  font-family: var(--font-mono); font-feature-settings: "tnum" 1;
  letter-spacing: var(--track-mono); font-size: 0.95rem;
}

.forge-tick {
  display: inline-block; width: 1px; height: 10px;
  background: var(--fg-tech); vertical-align: middle;
  margin-right: 8px;
}

.forge-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: baseline; gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--fg-rule);
}
.forge-row__index {
  font-family: var(--font-mono); font-size: var(--fs-tick);
  letter-spacing: var(--track-coord); text-transform: uppercase;
  color: var(--fg-tech-soft);
}
.forge-row__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h4); margin: 0; line-height: 1.25;
}
.forge-row__note {
  font-family: var(--font-serif); font-style: italic;
  color: var(--fg-3); margin: 4px 0 0;
}
.forge-row__meta {
  font-family: var(--font-mono); font-size: var(--fs-tick);
  letter-spacing: var(--track-coord); text-transform: uppercase;
  color: var(--fg-tech);
}

.forge-pip {
  display: inline-block; width: 6px; height: 6px;
  background: var(--fg-accent); vertical-align: middle;
  margin-right: 10px;
}

/* =====================================================================
   Surfaces
   ===================================================================== */

.forge-surface--blueprint {
  background: var(--forge-blueprint);
  color: var(--forge-blueprint-ink);
}
.forge-surface--blueprint .forge-h1,
.forge-surface--blueprint .forge-h2,
.forge-surface--blueprint .forge-h3,
.forge-surface--blueprint .forge-h4,
.forge-surface--blueprint .forge-display,
.forge-surface--blueprint .forge-body { color: var(--forge-blueprint-ink); }
.forge-surface--blueprint .forge-lead,
.forge-surface--blueprint .forge-caption,
.forge-surface--blueprint .forge-eyebrow { color: var(--forge-blueprint-mute); }
.forge-surface--blueprint .forge-rule,
.forge-surface--blueprint .forge-spec,
.forge-surface--blueprint .forge-row,
.forge-surface--blueprint .forge-coord-strip {
  border-color: var(--forge-blueprint-line);
}
.forge-surface--blueprint .forge-coord-strip,
.forge-surface--blueprint .forge-coord,
.forge-surface--blueprint .forge-row__index,
.forge-surface--blueprint .forge-row__meta,
.forge-surface--blueprint .forge-spec__label {
  color: var(--forge-blueprint-mute);
}

.forge-grid-bg {
  background-image:
    linear-gradient(to right, var(--fg-tech-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fg-tech-faint) 1px, transparent 1px);
  background-size: var(--grid-step) var(--grid-step);
}
.forge-surface--blueprint.forge-grid-bg {
  background-color: var(--forge-blueprint);
  background-image:
    linear-gradient(to right, var(--forge-blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--forge-blueprint-line) 1px, transparent 1px);
}