/* ============================================================
   Kristian Skorpen — Design System
   colors_and_type.css

   Drop-in stylesheet. Defines:
     1. Color tokens (raw + semantic)
     2. Type tokens (font stacks, scale, semantic styles)
     3. Spacing, radii, shadow, motion tokens
     4. Base element styles bound to the tokens above

   The legacy site exposes ~12 CSS vars in src/styles/global.css.
   This file is a superset — every legacy name is preserved so
   nothing breaks if this file is dropped in alongside it.
   ============================================================ */

/* ---------- Web fonts ---------- */
/* Fonts are loaded from Google Fonts as drop-in substitutes.
   The live site currently uses the system font stack. Switching
   to webfonts is part of the modernisation pass — flagged in
   README.md > CAVEATS so the user can confirm. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ============================================================
     1. COLORS
     ============================================================ */

  /* Raw palette — the brand greens come from the waveform mark.
     Mid-green is the primary action color; deep-green is press/
     hover; lime-green is reserved for accents and chart series. */
  --green-50:  #ECF6EE;
  --green-100: #D5EBD9;
  --green-200: #A8D6B0;
  --green-300: #7BC086;
  --green-400: #4FAB5F;
  --green-500: #1F8A4C;   /* primary brand green */
  --green-600: #166E3D;   /* hover / press */
  --green-700: #0E5630;
  --green-800: #093D22;
  --green-900: #062818;
  --green-lime: #56C24A;  /* highlight accent — waveform peak */

  /* Neutrals — warm, paper-leaning. Matches the document feel of
     the live site (off-white #fafaf8) but tightened for contrast. */
  --ink-1000: #0A0F0D;    /* deepest — used sparingly */
  --ink-900:  #0E1413;    /* primary text */
  --ink-700:  #2E3633;    /* secondary text on light */
  --ink-500:  #5A645F;    /* muted body */
  --ink-400:  #7B847F;    /* hints / captions */
  --ink-300:  #A8AEA9;    /* disabled text */
  --ink-200:  #D6D9D4;    /* borders strong */
  --ink-150:  #E6E5DE;    /* borders default — paper border */
  --ink-100:  #EFEDE5;    /* hairline / dividers */
  --ink-50:   #F7F5EE;    /* paper surface, warm */
  --ink-25:   #FAFAF6;    /* page background */
  --paper:    #FFFFFF;    /* card surface */

  /* Signal blue — secondary accent. Kept from the legacy site
     because the audience expects engineering-doc blue for links
     in body copy, and it pairs cleanly with the green. */
  --blue-500:  #0B5D8A;
  --blue-600:  #07436A;
  --blue-100:  #DDEBF4;

  /* Semantic state colors (warm, restrained) */
  --warn-500:  #B04A1B;   /* matches legacy --warn */
  --warn-100:  #FAEADD;
  --ok-500:    #1F7A4B;
  --ok-100:    #E0EFD9;
  --info-500:  #1A4B7A;
  --info-100:  #E2ECF7;
  --danger-500:#A8324A;
  --danger-100:#F5D9DA;

  /* Code / scope. Used for code blocks and "oscilloscope" panels
     in the engineering-doc visual language. */
  --code-bg:   #11161A;
  --code-fg:   #E6EDF3;
  --code-line: #B6E3C8;   /* signal trace green */
  --code-line-alt: #FFD27A;
  --grid-line: rgba(14,20,19,0.06); /* graph paper grid */

  /* ----- Semantic color aliases (use these in components) ----- */
  --fg:         var(--ink-900);
  --fg-soft:    var(--ink-500);
  --fg-muted:   var(--ink-400);
  --fg-on-dark: var(--paper);
  --bg:         var(--ink-25);
  --bg-card:    var(--paper);
  --bg-paper:   var(--ink-50);
  --bg-inset:   var(--ink-100);
  --border:     var(--ink-150);
  --border-strong: var(--ink-200);

  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-soft:   var(--green-50);
  --accent-on:     #FFFFFF;

  --link:          var(--blue-500);
  --link-hover:    var(--blue-600);

  --warn:          var(--warn-500);
  --ok:            var(--ok-500);

  /* ============================================================
     2. TYPOGRAPHY
     ============================================================ */

  /* Font stacks
     - serif: IBM Plex Serif — engineering-paper credibility, sits
       between literary and technical. Headlines + display only.
     - sans:  Inter — neutral, modern, geometric. UI + body.
     - mono:  JetBrains Mono — code, scope/spec readouts, equations.
   */
  --font-serif: "IBM Plex Serif", "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — modular, modest ratio (1.20). Aimed at print/doc
     density, not marketing-page bombast. Base is 17px to match the
     legacy site. */
  --fs-12:  0.75rem;     /* 12px — labels, eyebrow */
  --fs-13:  0.8125rem;   /* 13px — caption */
  --fs-14:  0.875rem;    /* 14px — small UI */
  --fs-15:  0.9375rem;   /* 15px — secondary body */
  --fs-17:  1.0625rem;   /* 17px — BODY (base) */
  --fs-19:  1.1875rem;   /* 19px — lead paragraph */
  --fs-22:  1.375rem;    /* 22px — h3 */
  --fs-26:  1.625rem;    /* 26px — h2 */
  --fs-32:  2rem;        /* 32px — h1 article */
  --fs-44:  2.75rem;     /* 44px — display / hero */
  --fs-60:  3.75rem;     /* 60px — display XL (sparingly) */

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.25;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-eyebrow: 0.12em;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ============================================================
     3. SPACING, RADII, SHADOW, MOTION
     ============================================================ */

  /* 4-step spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Layout */
  --content-max: 760px;  /* legacy — article width */
  --wide-max:   1120px;  /* legacy — grid + landing width */
  --display-max: 1280px; /* hero / wide marketing */

  /* Radii — modest, document-like. The brand reads "engineering",
     not "consumer SaaS"; never pillowy. */
  --radius-1: 4px;
  --radius-2: 6px;       /* legacy --radius */
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  /* Shadows — single soft elevation, plus a "lifted" state for
     hover. The system is deliberately understated. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10,15,13,0.04), 0 0 0 1px rgba(10,15,13,0.02);
  --shadow-2: 0 2px 6px rgba(10,15,13,0.06), 0 1px 2px rgba(10,15,13,0.04);
  --shadow-3: 0 8px 24px -8px rgba(10,15,13,0.12), 0 2px 6px rgba(10,15,13,0.06);
  --shadow-inset: inset 0 0 0 1px var(--border);
  --shadow-focus: 0 0 0 3px rgba(31,138,76,0.25);

  /* Motion — short, mechanical, never bouncy.
     Engineers don't trust ease-bounce on serious tools. */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;

  /* ---------- Legacy aliases (don't remove) ---------- */
  --radius: var(--radius-2);
  --shadow: var(--shadow-1);
}

/* ============================================================
   4. BASE ELEMENT STYLES
   ============================================================ */

html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--fs-17);
}

/* Headings use the serif. They get a slightly tighter line and
   negative tracking. The "display" sizes are reserved for hero/
   landing — not for in-article H1s, which stay at h1 article. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
  margin: 1.6em 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-32); margin-top: 0.4em; letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-26); }
h3 { font-size: var(--fs-22); font-weight: var(--fw-semi); }
h4 { font-size: var(--fs-17); font-weight: var(--fw-semi); }

/* Display sizes — opt-in classes */
.display-xl {
  font-family: var(--font-serif);
  font-size: var(--fs-60);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semi);
}
.display-lg {
  font-family: var(--font-serif);
  font-size: var(--fs-44);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-semi);
}

/* Eyebrow / small caps label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* Lead paragraph (under hero h1) */
.lead {
  font-size: var(--fs-19);
  line-height: var(--lh-loose);
  color: var(--fg-soft);
  max-width: 46em;
  text-wrap: pretty;
}

p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.35em; }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
a:hover {
  color: var(--link-hover);
  border-bottom-color: currentColor;
}

/* Inline code: mono, paper-tinted chip */
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-1);
  color: var(--ink-900);
}

/* Code blocks — "scope" panel. Subtle green signal-line top
   border, dark background. Mono only. */
pre {
  font-family: var(--font-mono);
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 1em 1.2em;
  border-radius: var(--radius-2);
  border-top: 2px solid var(--green-lime);
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.6;
}
pre code { background: transparent; padding: 0; color: inherit; }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--green-100); color: var(--ink-1000); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-2); }