/* ============================================================
   Elfe Design System — colors_and_type.css
   Patina, not paint. Two families, used quietly.
   ============================================================ */

/* Newsreader — local variable fonts (uploaded by user, May 2026) */
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Newsreader-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Newsreader-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono — local variable font (uploaded by user, May 2026) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -----------------------------------------------------------
     COLOR — base palette (the pigments)
     ----------------------------------------------------------- */
  --paper:        #f1eadb;   /* canvas / chart paper / aged sail */
  --paper-2:      #e8dfcb;   /* a darker paper for hover, alt rows */
  --paper-3:      #ddd2ba;   /* deepest paper, for inset blocks */
  --ink:          #1a1813;   /* warm near-black, iron-gall */
  --steel:        #5a6168;   /* oxidized steel hull, cool gray */
  --steel-light:  #8a8f93;
  --keel:         #27352d;   /* hunter green, below-the-waterline */
  --oxblood:      #7a2e1e;   /* bottom paint / accent / seal */
  --oxblood-hot:  #8b3a2a;   /* hover brighten */
  --bronze:       #a87b2f;
  --rust:         #9a4a26;

  /* Ink-on-paper transparency steps */
  --ink-05:  rgba(26, 24, 19, 0.05);
  --ink-10:  rgba(26, 24, 19, 0.10);
  --ink-20:  rgba(26, 24, 19, 0.20);
  --ink-30:  rgba(26, 24, 19, 0.30);
  --ink-50:  rgba(26, 24, 19, 0.50);
  --ink-70:  rgba(26, 24, 19, 0.70);

  --paper-70: rgba(241, 234, 219, 0.70);
  --paper-50: rgba(241, 234, 219, 0.50);

  /* -----------------------------------------------------------
     COLOR — semantic
     ----------------------------------------------------------- */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-2);
  --bg-inverse:    var(--keel);

  --fg:            var(--ink);
  --fg-muted:      var(--steel);
  --fg-faint:      var(--steel-light);
  --fg-inverse:    var(--paper);

  --rule:          var(--ink-20);
  --rule-strong:   var(--ink-50);

  --accent:        var(--oxblood);
  --accent-hot:    var(--oxblood-hot);
  --accent-soft:   var(--bronze);

  /* -----------------------------------------------------------
     TYPOGRAPHY — two families, no script.
     The "Elfe" wordmark is an IMAGE (the actual hand-painted
     name on the hull), not a font. See assets/logo/wordmark-elfe.jpg.
     ----------------------------------------------------------- */
  --font-serif: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -----------------------------------------------------------
     TYPOGRAPHY — type scale
     One weight (400) and one italic for serif. Two weights for mono.
     ----------------------------------------------------------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 17px;
  --fs-md:   19px;
  --fs-lg:   24px;
  --fs-xl:   32px;
  --fs-2xl:  44px;
  --fs-3xl:  60px;
  --fs-4xl:  84px;
  --fs-5xl:  120px;

  --lh-tight:  1.08;
  --lh-snug:   1.22;
  --lh-normal: 1.45;
  --lh-loose:  1.62;

  --ls-display: -0.015em;
  --ls-caps:    0.12em;
  --ls-caps-md: 0.08em;

  /* -----------------------------------------------------------
     SPACING / RADII / BORDERS / ELEVATION
     ----------------------------------------------------------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10:128px;

  --radius-0: 0;
  --radius-1: 2px;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--rule);
  --border-strong:   1px solid var(--rule-strong);
  --border-ink:      1px solid var(--ink);

  --plate-offset:    2px 2px 0 var(--ink-10);

  /* -----------------------------------------------------------
     MOTION / LAYOUT
     ----------------------------------------------------------- */
  --t-fast:   120ms ease-out;
  --t-base:   200ms ease-out;
  --t-slow:   400ms ease-out;

  --measure:        62ch;
  --container:    1200px;
  --container-tight: 880px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* HEADINGS — all Newsreader 400 roman. No optical-size juggling.
   Differentiation comes from SIZE alone. */

h1, h2, h3, h4, .h-display {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: var(--ls-display);
  margin: 0;
}

.h-display { font-size: var(--fs-4xl); line-height: var(--lh-tight); }
h1         { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2         { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h3         { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h4         { font-size: var(--fs-lg);  line-height: var(--lh-snug); }

/* BODY */
p, .body {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  font-weight: 400;
  margin: 0 0 1em 0;
  max-width: var(--measure);
}

/* LEDE — italic body, used once per section opener */
.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg);
}

/* PULL-QUOTE — italic body, larger, with rule */
blockquote, .pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
  margin: var(--s-7) 0;
  max-width: var(--measure);
}

/* PLATE MARK — mono caps, the technical voice */
.plate-mark, .label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-muted);
}

/* SPEC — mono inline values */
.spec, .mono, code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--fg);
}
.spec-value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg);
}

/* CAPTION */
.caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}

/* PRICE — serif display, mono unit */
.price-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--fg);
}
.price-unit {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--fg-muted);
  letter-spacing: var(--ls-caps-md);
  text-transform: uppercase;
}

/* LINKS */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ink-30);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--t-base), opacity var(--t-fast);
}
a:hover { text-decoration-color: var(--accent); }
a:active { opacity: 0.7; }

/* HORIZONTAL RULES */
.rule, hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--s-7) 0;
}
.rule--strong { border-top: var(--border-strong); }
.rule--ink    { border-top: var(--border-ink); }

/* WORDMARK — always an image. Use the .wordmark utility class
   so the painted Elfe sits on a paper background and scales by height. */
.wordmark {
  display: inline-block;
  height: 1em;
  vertical-align: -0.18em;
}
.wordmark--lg { height: 0.9em; }