/* ============================================================
   HONRICH WEBSITE — DESIGN TOKENS (V1.1)
   Precision Engineering + Evidence Trust
   ============================================================ */

:root {
  /* ---- Color Tokens (Visual Design V1.0 §2.1) ---- */
  --ink:        #101418;   /* primary text (warm charcoal)      */
  --paper:      #FFFFFF;   /* content surface                    */
  --steel:      #6B7280;   /* secondary text / meta              */
  --silver:     #B8BEC4;   /* tertiary text / placeholder        */
  --coal:       #0B1220;   /* hero / dark section bg             */
  --coal-2:     #131C2E;   /* dark card surface                  */
  --forge:      #E2570C;   /* ACCENT — interactive only          */
  --forge-ink:  #B8450A;   /* accent hover / active / focus      */
  --verify:     #1E7A46;   /* verified status green (semantic)   */
  --verify-ink: #145632;   /* verified green deep                */
  --line:       #E5E7EB;   /* hairline (light sections)          */
  --line-dark:  rgba(255,255,255,0.14); /* hairline (dark)       */

  /* ---- Typography Tokens ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* ---- Type Scale ---- */
  --fs-hero:    clamp(2.5rem, 6vw, 4rem);   /* 40–64px   */
  --fs-h2:      clamp(1.75rem, 3.4vw, 2.25rem); /* 28–36px */
  --fs-h3:      1.25rem;
  --fs-body:    1rem;
  --fs-meta:    0.8125rem;
  --fs-data:    0.9375rem;

  /* ---- Spacing ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* ---- Layout ---- */
  --container: 1200px;
  --radius: 0;            /* zero radius — sharp industrial geometry */
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-hero); text-transform: uppercase; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--forge); }

/* tabular numbers for data everywhere */
.mono, table td, .data, .cert-no, .param {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }

section { padding: var(--space-6) 0; }

/* section on dark background */
.dark  { background: var(--coal); color: #fff; }
.dark-2{ background: var(--coal-2); color: #fff; }
.light { background: var(--paper); }
.muted { background: #F6F7F8; }

.meta  { color: var(--steel); font-size: var(--fs-meta); }
.silver{ color: var(--silver); }

::selection { background: var(--forge); color: #fff; }

/* focus visibility (a11y) */
:focus-visible { outline: 2px solid var(--forge-ink); outline-offset: 2px; }