/* ============================================================
   ITHILDIN — Design Tokens
   Self-hosted fonts (no third-party CDN). All woff2 served from
   /assets/fonts/ on the same origin.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2-variations"),
       url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2-variations"),
       url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var.woff2") format("woff2-variations"),
       url("/assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-var.woff2") format("woff2-variations"),
       url("/assets/fonts/geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-var.woff2") format("woff2-variations"),
       url("/assets/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---- Color ---- */
  --bg:           #07090C;   /* near-black, slightly cool */
  --bg-elevated:  #0B0E12;
  --surface:      #111316;
  --surface-2:    #15181D;
  --hairline:     #1E2228;   /* thin separators */
  --hairline-2:   #2A2F36;

  --text:         #E8E8EA;
  --text-muted:   #8A8E96;
  --text-faint:   #757A84;

  --silver:       #C9D4E2;   /* ithildin silver — links, key data */
  --moonlight:    #7FA8D8;   /* reveal-on-hover, live data only */
  --swiss-red:    #DA291C;   /* one or two appearances on /trust */

  /* ---- Type ---- */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — restrained. Never more than 3 sizes per section. */
  --t-display:   clamp(48px, 6.4vw, 96px);   /* hero h1 */
  --t-h1:        clamp(36px, 4.2vw, 56px);   /* page h1 */
  --t-h2:        clamp(24px, 2.4vw, 32px);   /* section h2 */
  --t-h3:        20px;
  --t-body:      16px;
  --t-body-lg:   18px;
  --t-small:     14px;
  --t-eyebrow:   11px;       /* mono labels */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  --track-tight: -0.02em;
  --track-eye:   0.14em;     /* mono eyebrow */

  /* ---- Spacing (8pt) ---- */
  --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;
  --s-11: 192px;

  /* ---- Layout ---- */
  --container:    1280px;
  --gutter:       clamp(20px, 4vw, 48px);

  /* ---- Motion ---- */
  --ease:         cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast:       180ms;
  --t-med:        320ms;
  --t-slow:       640ms;
}

/* ---- Reset (minimal) ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--silver); color: var(--bg); }

/* ---- Primitives ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eye);
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--hairline-2);
}

.hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.hairline-thick { border: 0; border-top: 1px solid var(--hairline-2); margin: 0; }

/* Link with quiet underline that lifts to silver on hover */
.link {
  color: var(--text);
  border-bottom: 1px solid var(--hairline-2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.link:hover { color: var(--silver); border-color: var(--silver); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text);
  transition: color var(--t-fast) var(--ease);
}
.link-arrow .arr {
  display: inline-block;
  transition: transform var(--t-med) var(--ease);
}
.link-arrow:hover { color: var(--silver); }
.link-arrow:hover .arr { transform: translateX(4px); }

/* Section padding */
.section { padding-block: var(--s-10); border-top: 1px solid var(--hairline); }
.section-tight { padding-block: var(--s-9); border-top: 1px solid var(--hairline); }
@media (max-width: 720px) {
  .section { padding-block: var(--s-9); }
  .section-tight { padding-block: var(--s-8); }
}

/* H levels */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: var(--track-tight); line-height: var(--lh-tight); color: var(--text); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
p  { margin: 0; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}