/* ============================================================
   DYNEX Design System — colors_and_type.css
   Light-first · Architectural blueprint on white canvas.
   Sole chromatic accent: DYNEX Turquoise #00D2BE.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Instrument+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=Urbanist:wght@500;600;700&display=swap');

:root {
  /* ---------- COLORS ---------- */
  --color-midnight-ink: #0f1012;     /* primary text, structural borders */
  --color-deep-graphite: #020201;    /* highest-contrast text/strokes */
  --color-ghost-white: #f2f2f4;      /* primary background */
  --color-canvas: #fdfdfd;           /* secondary surface */
  --color-skyline-gray: #868788;     /* soft background break */
  --color-slate-comment: #8f8f8f;    /* secondary text */

  /* DYNEX Turquoise — replaces Augen Pro's Future Blue everywhere */
  --color-dynex-turquoise: #00D2BE;
  --color-dynex-turquoise-hover: #00E8D0;
  --color-dynex-turquoise-press: #00B7A6;
  --color-dynex-turquoise-soft: rgba(0, 210, 190, 0.08);
  --color-dynex-turquoise-glow: rgba(0, 210, 190, 0.15);

  /* Semantic color aliases */
  --fg-1: var(--color-midnight-ink);
  --fg-2: var(--color-slate-comment);
  --fg-muted: var(--color-skyline-gray);
  --fg-accent: var(--color-dynex-turquoise);
  --bg-1: var(--color-ghost-white);
  --bg-2: var(--color-canvas);
  --border-strong: var(--color-midnight-ink);
  --border-subtle: rgba(15, 16, 18, 0.08);
  --border-faint: rgba(15, 16, 18, 0.04);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Syne', ui-sans-serif, system-ui, sans-serif;          /* headlines */
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;  /* body, UI */
  --font-stat: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;/* big numerals */
  --font-eyebrow: 'Urbanist', ui-sans-serif, system-ui, sans-serif;      /* micro-labels */

  /* Augen Pro type scale, kept */
  --text-caption: 10px;
  --text-micro: 12px;
  --text-small: 13px;
  --text-base: 14px;
  --text-body: 16px;
  --text-heading-sm: 18px;
  --text-heading-md: 22px;
  --text-heading-lg: 27px;
  --text-display-sm: 36px;
  --text-display-md: 52px;
  --text-display-lg: 88px;

  --leading-tight: 1.06;
  --leading-snug: 1.20;
  --leading-relaxed: 1.65;
  --leading-loose: 1.75;

  --tracking-display: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-button: -0.01em;
  --tracking-eyebrow: 0.08em;

  /* ---------- SPACING (Augen Pro, verbatim) ---------- */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-22: 22px;
  --spacing-30: 30px;
  --spacing-34: 34px;
  --spacing-35: 35px;
  --spacing-50: 50px;
  --spacing-69: 69px;
  --spacing-94: 94px;
  --spacing-113: 113px;
  --spacing-130: 130px;
  --spacing-144: 144px;
  --spacing-220: 220px;

  --section-gap: 94px;
  --element-gap: 6px;

  /* ---------- RADII ---------- */
  --radius-hairline: 1.8px;
  --radius-button: 10px;
  --radius-pill: 26px;
  --radius-misc: 54px;
  --radius-full: 999px;

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick: 0.3s;
  --dur-base: 0.4s;
  --dur-reveal: 0.7s;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 8vw, var(--text-display-lg));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, var(--text-display-md));
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-heading-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h4, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.p, p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
}

.small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  letter-spacing: -0.2px;
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.stat {
  font-family: var(--font-stat);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}

.stat-xl {
  font-family: var(--font-stat);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg-accent);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: lowercase;
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-standard);
}
a:hover { color: var(--color-dynex-turquoise-hover); }

::selection {
  background: var(--color-dynex-turquoise);
  color: var(--bg-2);
}