/* ==========================================================================
   ShurIQ Design System · colors_and_type.css
   v0.1 · Sourced directly from shuriq-visual-grammar.pages.dev
   ========================================================================== */

/* All three brand families self-hosted from /fonts. */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-v19-latin-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-v19-latin-italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/source-sans-3-v19-latin-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-sans-3-v19-latin-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/source-sans-3-v19-latin-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/source-sans-3-v19-latin-700italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playfair-display-v40-latin-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playfair-display-v40-latin-italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/playfair-display-v40-latin-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/playfair-display-v40-latin-italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/playfair-display-v40-latin-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/playfair-display-v40-latin-700italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/playfair-display-v40-latin-900.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-500.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-700.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-700.ttf') format('truetype');
}

:root {
  /* ── Foundation ──────────────────────────────────────────────────── */
  --bg:             #FAF8F5;   /* warm cream — never pure white */
  --bg-soft:        #F4F0E8;   /* inset / subtle fill */
  --paper:          #FFFFFF;   /* card surface only, not page bg */

  --fg-1:           #1A1A1A;   /* primary text, near-black slightly warm */
  --fg-2:           #4A4540;   /* secondary text */
  --fg-3:           #807870;   /* muted / metadata */
  --fg-ink:         #0A0A0A;   /* deepest ink — sparingly, topbars */

  --rule:           #1A1A1A;   /* dividers & strong rules (hairline weight) */
  --hairline:       rgba(26,26,26,0.08);

  /* ── Accents (meaningful use only) ──────────────────────────────── */
  --accent:         #1E3A6E;   /* cobalt · bridge · links · system hue */
  --accent-soft:    rgba(30,58,110,0.07);
  --critical:       #A62114;   /* gap · severity high · kickers */
  --warm:           #A65F16;   /* high priority · event markers */
  --ochre:          #A89917;   /* notable */
  --sage:           #3F6B4E;   /* passing / resolved */

  /* ── Cluster palette (7-color, for InfraNodus topologies) ───────── */
  --cluster-1:      #A62114;   /* red-brown */
  --cluster-2:      #4CB014;   /* green */
  --cluster-3:      #3094A7;   /* teal */
  --cluster-4:      #7E00B0;   /* violet */
  --cluster-5:      #A89917;   /* ochre */
  --cluster-6:      #A7009C;   /* magenta */
  --cluster-7:      #1E3A6E;   /* cobalt (reserved for bridge) */

  /* ── Type families ──────────────────────────────────────────────── */
  --font-display:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:      'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale (desktop, editorial long-form) ──────────────────── */
  --fs-display-xl:  86px;   /* hero title */
  --fs-display:     48px;   /* h1 */
  --fs-h2:          36px;
  --fs-h3:          26px;
  --fs-h4:          18px;
  --fs-body:        17px;   /* running text */
  --fs-small:       15px;
  --fs-meta:        11px;   /* mono metadata */
  --fs-tag:         10px;   /* mono tags, all-caps */

  --lh-body:        1.65;
  --lh-display:     0.98;
  --lh-h2:          1.1;
  --ls-display:    -0.025em;
  --ls-h2:         -0.015em;
  --ls-mono:        0.12em; /* metadata tracking */

  /* ── Weights ────────────────────────────────────────────────────── */
  --fw-display:     900;
  --fw-display-reg: 500;
  --fw-h2:          700;
  --fw-body:        400;
  --fw-body-bold:   700;
  --fw-mono:        500;
  --fw-mono-bold:   600;

  /* ── Measure (editorial single-column) ──────────────────────────── */
  --measure-narrow: 660px;
  --measure:        760px;
  --measure-wide:   1240px;

  /* ── Spacing (8-based, calm rhythm) ─────────────────────────────── */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           24px;
  --sp-6:           32px;
  --sp-7:           48px;
  --sp-8:           64px;
  --sp-9:           80px;
  --sp-10:          96px;

  /* ── Borders & radii (system is nearly-flat) ────────────────────── */
  --border:         1px solid var(--rule);
  --border-hair:    1px solid var(--hairline);
  --radius-0:       0px;     /* default — institutional */
  --radius-1:       2px;     /* mono-tag chips only */
  --radius-2:       4px;     /* rare — inputs */

  /* No shadows, no gradients, no glows. */
}

/* ── Semantic defaults ──────────────────────────────────────────── */
html { font-size: 16px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--fg-1); margin: 0; }

h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 6vw, 86px); line-height: .98; letter-spacing: -0.025em; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }

h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--fg-2); }

p  { margin: 0 0 20px; max-width: var(--measure); }

code, .mono { font-family: var(--font-mono); font-size: 0.88em; }

a  { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--critical); }

/* ── Named marks ────────────────────────────────────────────────── */
.kicker       { font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--critical); }
.section-num  { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--fg-3); display: block; }
.meta-line    { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.mono-tag     { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--bg-soft); color: var(--fg-2); padding: 3px 8px; border-radius: 2px; }

.rule-thick   { border: 0; border-top: 1px solid var(--rule); margin: 80px 0 48px; }
.rule-hair    { border: 0; border-top: 1px solid var(--hairline); margin: 32px 0; }

.pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  padding: 32px 0;
  margin: 48px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 820px;
}

/* Brand lockup — Shur<em>IQ</em> */
.lockup       { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; }
.lockup em    { font-style: italic; font-weight: 500; color: var(--fg-2); }