/* ============================================================
   Engineering Codex — colors_and_type.css
   v.2026.05
   Foundation tokens for color, type, spacing, motion, borders.
   ============================================================ */

/* ---- Web fonts (Google Fonts substitutes) ---------------- */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Inter:wght@300..800&family=JetBrains+Mono:ital,wght@0,400..700;1,400..700&display=swap");

/* If you have the licensed originals, drop them in ./fonts/ and
   these @font-face rules will be preferred over the imports above. */
@font-face {
  font-family: "GT Sectra";
  src: url("./fonts/GT-Sectra.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
@font-face {
  font-family: "Berkeley Mono";
  src: url("./fonts/BerkeleyMono.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}

/* ============================================================
   :root — design tokens
   ============================================================ */
:root {
  /* ---- Foundation surfaces ---- */
  --ink-black:        #0A0A0B; /* default page background */
  --ink-deep:         #14151A; /* section alternates */
  --ink-night:        #091423; /* deep hero / cards */
  --paper-light:      #FAF9F5; /* anthropic parchment */
  --paper-warm:       #F0E6D2; /* codex parchment cards */
  --paper-aged:       #E8DCC0; /* older parchment accent */

  /* ---- Accent — copper (primary) ---- */
  --copper:           #D97757;
  --copper-deep:      #B85F40;
  --ochre:            #FFC47C;

  /* ---- Accent — ink-blue / data-only ---- */
  --ink-blue:         #4A6FA5;
  --ink-blue-deep:    #273951;
  --data-cyan:        #52AEFF;
  --data-violet:      #7389FF;

  /* ---- Neutrals ---- */
  --gray-100:         #EBEBEB;
  --gray-200:         #C8C9CC;
  --gray-400:         #8A8F98; /* linear caption gray */
  --gray-600:         #4D4D4D;
  --gray-800:         #222326;
  --gray-900:         #16171A;

  /* ---- Data viz palette ---- */
  --data-1: #D97757; /* copper */
  --data-2: #4A6FA5; /* ink-blue */
  --data-3: #788C5D; /* patina green */
  --data-4: #FFC47C; /* ochre */
  --data-5: #7389FF; /* violet */
  --grid:        #2A2A2A;
  --grid-paper:  #C8B89A;

  /* ---- Status ---- */
  --rust:        #8B3A1F;
  --success:     #6B8E5A;
  --warn:        #C97D3A;

  /* ---- Semantic foreground ---- */
  --fg-on-ink:        #E8E8E8; /* body on dark, never pure white */
  --fg-on-ink-mute:   #8A8A8A;
  --fg-on-ink-faint:  #4D4D4D;
  --fg-on-paper:      #1A1A1A;
  --fg-on-paper-mute: #6B5D45;
  --fg-on-paper-faint:#A89A7A;

  /* ---- Border tokens ---- */
  --border-on-ink:     #222326;
  --border-on-paper:   #C8B89A;
  --border-accent:     var(--copper);
  --border-w:          1px;

  /* ---- Shadows (single allowed) ---- */
  --shadow-card:    0 24px 48px -16px rgba(0, 0, 0, 0.45);
  --shadow-card-paper: 0 18px 36px -12px rgba(60, 40, 20, 0.18);
  --shadow-none:    none;

  /* ---- Corner radii — sharp by design ---- */
  --r-0:  0px;       /* default everywhere */
  --r-pill: 9999px;  /* status dots only */

  /* ---- Spacing — 8px base ---- */
  --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: 160px;

  /* ---- Layout widths ---- */
  --w-prose:     64ch;     /* ~720px long-read */
  --w-container: 1280px;
  --w-hero:      1440px;
  --gutter:      32px;

  /* ---- Typography — families ---- */
  --font-display: "GT Sectra", "Source Serif 4", "Tiempos Headline", Georgia, serif;
  --font-display-italic: "GT Sectra", "Source Serif 4", "Tiempos Italic", Georgia, serif;
  --font-prose:   "Lora", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Inter", "Söhne", system-ui, sans-serif;
  --font-mono:    "Berkeley Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ---- Type scale ---- */
  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  1.125rem;    /* 18px */
  --text-md:    1.375rem;    /* 22px */
  --text-lg:    1.5rem;      /* 24px */
  --text-xl:    2rem;        /* 32px */
  --text-2xl:   2.5rem;      /* 40px */
  --text-3xl:   3rem;        /* 48px */
  --text-4xl:   3.5rem;      /* 56px */
  --text-5xl:   4rem;        /* 64px */
  --text-6xl:   5rem;        /* 80px */
  --text-display: clamp(3.5rem, 8vw, 7rem);

  /* ---- Tracking ---- */
  --track-tight:  -0.025em;
  --track-snug:   -0.01em;
  --track-0:      0;
  --track-eyebrow: 0.15em;
  --track-caption: 0.05em;
  --track-mono:    0.1em;

  /* ---- Line height ---- */
  --lh-display: 0.95;
  --lh-heading: 1.1;
  --lh-body:    1.55;
  --lh-prose:   1.7;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0.05, 0.36, 1);
  --d-fast:     120ms;
  --d-base:     220ms;
  --d-slow:     480ms;
}

/* ============================================================
   Element defaults — semantic CSS for h1/h2/h3/p/code/etc
   ============================================================ */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--ink-black);
  color: var(--fg-on-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Surface utilities */
.on-paper { background: var(--paper-warm); color: var(--fg-on-paper); }
.on-ink   { background: var(--ink-black); color: var(--fg-on-ink); }
.on-deep  { background: var(--ink-deep);  color: var(--fg-on-ink); }

/* Headings — display serif by default */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-heading);
  margin: 0;
  color: inherit;
}

h1, .h1 {
  font-size: var(--text-display);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-display);
  font-weight: 600;
}

h2, .h2 {
  font-size: var(--text-3xl);
  letter-spacing: var(--track-snug);
}

h3, .h3 {
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
}

h4, .h4 {
  font-size: var(--text-md);
  font-weight: 500;
}

/* Body & lead */
p { margin: 0 0 1em; }
.lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--fg-on-ink-mute);
  max-width: 60ch;
}

/* Long-read prose mode */
.prose {
  font-family: var(--font-prose);
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  max-width: var(--w-prose);
  color: var(--fg-on-paper);
}
.prose p + p { margin-top: 1em; }

/* Mono caption / FIG label */
.caption, figcaption, .fig-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caption);
  color: var(--gray-400);
  text-transform: none;
}

/* Eyebrow — section number */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--copper);
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
.eyebrow .dot { font-size: 0.85em; }

/* Quote / pull */
blockquote, .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: 1.25;
  margin: 0;
  max-width: 720px;
}

/* Code & inline mono */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-deep);
  color: var(--ochre);
  padding: 0.1em 0.4em;
  border: 1px solid var(--border-on-ink);
}

/* Hairline rule */
hr {
  border: 0;
  height: 1px;
  background: var(--border-on-ink);
  margin: var(--s-7) 0;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-fast) var(--ease-out);
}
a:hover { border-bottom-color: var(--copper); }

/* ============================================================
   Primitive component classes
   ============================================================ */

/* Primary CTA — mono uppercase, copper-rule, arrow notation */
.btn-primary {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  padding: 0.875em 1.5em;
  background: transparent;
  color: var(--paper-warm);
  border: 1px solid var(--copper);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out);
}
.btn-primary::before {
  content: "┌──→";
  color: var(--copper);
  transition: transform var(--d-base) var(--ease-out);
}
.btn-primary:hover {
  background: var(--copper);
  color: var(--ink-black);
}
.btn-primary:hover::before {
  color: var(--ink-black);
  transform: translateX(4px);
}

/* Secondary CTA — mono with arrow, no border */
.btn-secondary {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  background: transparent;
  color: var(--fg-on-ink);
  border: 0;
  padding: 0.875em 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.btn-secondary::after { content: "→"; color: var(--copper); }
.btn-secondary:hover { border-bottom: 1px solid var(--copper); }

/* Card — parchment surface */
.card {
  background: var(--paper-warm);
  color: var(--fg-on-paper);
  border: 1px solid var(--border-on-paper);
  padding: var(--s-8);
  box-shadow: var(--shadow-card-paper);
}

/* Stats block */
.stat-num {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--gray-400);
  margin-top: var(--s-2);
}

/* Trustbar logo treatment */
.trust-logo {
  height: 24px;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity var(--d-base) var(--ease-out), filter var(--d-base) var(--ease-out);
}
.trust-logo:hover { opacity: 1; filter: none; }

/* Dimensioned divider */
.divider-dim {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-mono);
  color: var(--gray-400);
}
.divider-dim::before, .divider-dim::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-on-ink);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}