/* ============================================================
   Polinowski Engineering — Foundations
   colors + typography tokens, plus semantic element styles
   ============================================================ */

/* ---- Web fonts: IBM Plex (OFL license, redistribution allowed) ----
   PRODUCTION: served locally from /fonts/ — no Google Fonts request, no CDN.
   See fonts/README.md for the one-time setup (download the .woff2 files into the
   IBM_Plex_Sans/ and IBM_Plex_Mono/ subfolders).
   
   The block below intentionally lists only the weights actually used in the
   design system. Variable-font versions of Plex also work — adjust paths accordingly. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBM_Plex_Sans/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBM_Plex_Sans/IBMPlexSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBM_Plex_Mono/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBM_Plex_Mono/IBMPlexMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBM_Plex_Serif/IBMPlexSerif-Italic.woff2") format("woff2");
}

:root {
  /* ===== Color: Ink (primary surface ink, near-black with navy bias) ===== */
  --ink-900: #0B1220;   /* deepest — headlines on light, primary surface on dark */
  --ink-800: #131C2E;
  --ink-700: #1C2740;
  --ink-600: #2A3653;
  --ink-500: #3D4A6B;

  /* ===== Color: Steel (cool neutral gray family) ===== */
  --steel-900: #1F2937;
  --steel-700: #475569;
  --steel-500: #64748B;
  --steel-400: #94A3B8;
  --steel-300: #CBD5E1;
  --steel-200: #E2E8F0;
  --steel-150: #ECEEF2;
  --steel-100: #F1F3F6;
  --steel-50:  #F7F8FA;

  /* ===== Color: Paper (warm off-white, sets the document tone) ===== */
  --paper:      #F4F2EC;   /* canvas */
  --paper-soft: #FAF8F3;   /* card */
  --paper-deep: #EAE6DA;   /* divider / inset */

  /* ===== Accent: Signal (a single, calm technical blue) ===== */
  --signal-700: #1B3DA8;
  --signal-600: #1E4FCC;   /* primary accent */
  --signal-500: #3A6CDB;
  --signal-100: #E6EDFB;

  /* ===== Accent: Copper (rare highlight — engineering warmth) ===== */
  --copper-700: #8F4E1A;
  --copper-600: #B8651E;   /* highlight */
  --copper-500: #C97D3A;
  --copper-100: #F5E7D5;

  /* ===== Semantic status ===== */
  --ok:    #2F8F5B;
  --ok-bg: #E4F3EB;
  --warn:  #B8862C;
  --warn-bg: #FAF0D6;
  --err:   #B8362C;
  --err-bg: #F8E0DC;

  /* ===== Foreground tokens (use these in product code) ===== */
  --fg-1: var(--ink-900);    /* primary text */
  --fg-2: var(--steel-700);  /* secondary */
  --fg-3: var(--steel-500);  /* muted, captions */
  --fg-inv: var(--paper-soft);

  /* ===== Background tokens ===== */
  --bg-canvas: var(--paper);
  --bg-card:   #FFFFFF;
  --bg-sunk:   var(--paper-deep);
  --bg-ink:    var(--ink-900);

  /* ===== Border tokens (hairlines are part of the engineering motif) ===== */
  --border-hair: #D9D5C6;        /* on paper */
  --border-cool: var(--steel-200);
  --border-strong: var(--ink-900);

  /* ===== Type families ===== */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-display: "IBM Plex Sans", sans-serif; /* tight tracking + low weight = display */

  /* ===== Type scale (linear, restrained — no oversized display) ===== */
  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  44px;
  --t-4xl:  60px;
  --t-5xl:  80px;

  /* ===== Spacing scale ===== */
  --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;

  /* ===== Radii (low — engineering precision, not playful) ===== */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ===== Elevation (very restrained — flat with hairlines preferred) ===== */
  --shadow-1: 0 1px 0 rgba(11,18,32,0.04), 0 1px 2px rgba(11,18,32,0.05);
  --shadow-2: 0 1px 0 rgba(11,18,32,0.04), 0 6px 18px -8px rgba(11,18,32,0.18);
  --shadow-3: 0 24px 60px -30px rgba(11,18,32,0.35);
  --shadow-inset-hair: inset 0 0 0 1px var(--border-hair);
}

/* ============================================================
   Semantic element defaults
   ============================================================ */
.pe-body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

.pe-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-4xl);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.pe-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-3xl);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}
.pe-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.pe-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pe-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pe-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--fg-2);
}
.pe-p {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--fg-1);
}
.pe-small {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--fg-2);
}
.pe-mono, .pe-code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.01em;
}
.pe-spec {
  /* engineering "spec line" — small mono used as label-with-rule */
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-2);
}

/* Selection */
::selection { background: var(--ink-900); color: var(--paper-soft); }