/* ==========================================================================
   SaaS 971 — Design tokens
   Modern editorial. Warm neutrals + saturated accent. Serif + sans + mono.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------------------
     COLOR — warm neutrals, deep ink, single saturated accent (oxblood).
     Naming follows fg/bg/line semantic scale, with raw ramps below.
     -------------------------------------------------------------------- */

  /* Raw neutrals — warm, paper-leaning */
  --paper:       #F7F4EE;  /* off-white page */
  --paper-2:     #F1ECE2;  /* sand panel */
  --paper-3:     #E6DFD1;  /* deeper sand / dividers in light surfaces */
  --sand:        #D8CFBC;  /* muted card border */
  --stone:       #A89E8A;  /* secondary text on paper */
  --slate:       #5C5448;  /* tertiary ink */
  --ink:         #1C1A17;  /* primary ink — near-black, warm */
  --ink-2:       #2A2723;  /* surfaces in dark mode */
  --ink-3:       #3A352F;  /* dark mode dividers */

  /* Accent — oxblood. Restrained, used as a single signal color. */
  --accent:      #7A1F2B;  /* primary accent */
  --accent-ink:  #5A1620;  /* pressed / heading accent */
  --accent-soft: #C5727B;  /* hover wash, on-paper highlight */
  --accent-wash: #F2E4E5;  /* tinted background, very low intensity */

  /* Secondary signal — deep teal, for diagrams + diff additions only */
  --teal:        #1F4D4A;
  --teal-soft:   #6E9E99;
  --teal-wash:   #E2EBE9;

  /* Status — desaturated, editorial */
  --ok:          #355E3B;
  --warn:        #8A6A1F;
  --err:         var(--accent);

  /* Code surfaces */
  --code-bg:     #14120F;
  --code-fg:     #E8E2D4;
  --code-line:   #2A2620;
  --code-comment:#7A7160;
  --code-string: #C5A572;
  --code-keyword:#C5727B;
  --code-fn:     #9EBFB9;

  /* --------------------------------------------------------------------
     SEMANTIC COLOR — use these in product code.
     -------------------------------------------------------------------- */
  --bg:          var(--paper);
  --bg-2:        var(--paper-2);
  --bg-3:        var(--paper-3);
  --surface:     #FFFFFF;
  --surface-alt: var(--paper-2);

  --fg:          var(--ink);
  --fg-2:        var(--slate);
  --fg-3:        var(--stone);
  --fg-on-ink:   var(--paper);

  --line:        var(--paper-3);
  --line-strong: var(--sand);
  --line-ink:    var(--ink);

  --link:        var(--accent);
  --link-hover:  var(--accent-ink);
  --selection:   var(--accent-wash);

  /* --------------------------------------------------------------------
     TYPOGRAPHY — Newsreader (serif display), Inter Tight (sans/UI),
     JetBrains Mono (code). Optical sizing on the serif.
     -------------------------------------------------------------------- */
  --serif:       "Newsreader", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --sans:        "Geist", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:        "JetBrains Mono", "SF Mono", "Menlo", Consolas, monospace;

  /* Type scale — modular ratio ≈ 1.25, anchored at 16px body */
  --fs-eyebrow:  0.75rem;   /* 12 — labels, captions, kicker */
  --fs-small:    0.875rem;  /* 14 */
  --fs-body:     1rem;      /* 16 */
  --fs-lead:     1.1875rem; /* 19 */
  --fs-h6:       1.0625rem; /* 17 */
  --fs-h5:       1.25rem;   /* 20 */
  --fs-h4:       1.5rem;    /* 24 */
  --fs-h3:       1.9375rem; /* 31 */
  --fs-h2:       2.5rem;    /* 40 */
  --fs-h1:       3.5rem;    /* 56 */
  --fs-display:  5.25rem;   /* 84 */

  --lh-tight:    1.04;
  --lh-snug:     1.18;
  --lh-normal:   1.5;
  --lh-loose:    1.7;

  --tr-tight:    -0.02em;
  --tr-snug:     -0.01em;
  --tr-normal:   0;
  --tr-eyebrow:  0.08em;   /* uppercase kicker */
  --tr-mono:     -0.005em;

  /* --------------------------------------------------------------------
     SPACE — 4px base. Use semantic names for layout; raw for fine work.
     -------------------------------------------------------------------- */
  --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;
  --s-11: 192px;

  --gutter:      var(--s-7);
  --container:   1240px;
  --container-narrow: 760px;

  /* --------------------------------------------------------------------
     RADII — small. Editorial doesn't pillow.
     -------------------------------------------------------------------- */
  --r-1: 2px;
  --r-2: 4px;   /* default for fields, badges */
  --r-3: 8px;   /* cards */
  --r-4: 12px;  /* large surfaces */
  --r-pill: 999px;

  /* --------------------------------------------------------------------
     BORDERS + SHADOWS — thin hairlines; shadows are subtle, warm.
     -------------------------------------------------------------------- */
  --bw:        1px;
  --bw-strong: 1.5px;

  --shadow-1: 0 1px 0 rgba(28, 26, 23, 0.04), 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-2: 0 2px 4px rgba(28, 26, 23, 0.06), 0 8px 24px -8px rgba(28, 26, 23, 0.12);
  --shadow-3: 0 12px 32px -12px rgba(28, 26, 23, 0.18), 0 4px 8px rgba(28, 26, 23, 0.06);
  --shadow-inset-line: inset 0 0 0 1px var(--line);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ==========================================================================
   SEMANTIC TYPE — apply directly or via utility classes.
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--selection); color: var(--fg); }

.eyebrow,
[data-eyebrow] {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

h1, .h1 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "opsz" 48;
  color: var(--fg);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  font-weight: 500;
  font-variation-settings: "opsz" 32;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 500;
  font-variation-settings: "opsz" 24;
}

h4, .h4 {
  font-family: var(--sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 600;
}

h5, .h5 {
  font-family: var(--sans);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  font-weight: 600;
}

h6, .h6 {
  font-family: var(--sans);
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: var(--lh-snug);
}

p, .p {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg);
  text-wrap: pretty;
}

.lead {
  font-family: var(--serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 18;
  color: var(--fg-2);
}

.small, small { font-size: var(--fs-small); color: var(--fg-2); }

.display {
  font-family: var(--serif);
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}

code, kbd, samp, .code {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: var(--tr-mono);
}

pre {
  font-family: var(--mono);
  background: var(--code-bg);
  color: var(--code-fg);
  padding: var(--s-5);
  border-radius: var(--r-3);
  overflow-x: auto;
  font-size: var(--fs-small);
  line-height: 1.6;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

/* The "971" mark — used as a quiet positioning detail throughout */
.mark-971 {
  font-family: var(--mono);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  font-feature-settings: "tnum";
}