/* ───────────────────────────────────────────────────────────────────────
   SPRING SILICON — Design System / Global stylesheet
   This is the root stylesheet the compiler reads. It pulls in the Figma
   token + typography + asset closures and layers the brand's semantic
   tokens and typographic system on top.
   ─────────────────────────────────────────────────────────────────────── */
@import './fonts.css';
@import './components/fig-tokens.css';
@import './components/fig-typography.css';
@import './components/fig-assets.css';

:root {
  /* ── Type families ─────────────────────────────────────────────── */
  --font-display: "KH Giga TRIAL", "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "KH Teka TRIAL", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "KH Teka Mono TRIAL", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Semantic surfaces ─────────────────────────────────────────── */
  --bg-black:  var(--neutrals-grey-950);  /* rgb(6,6,6)      */
  --bg-paper:  var(--neutrals-grey-10);   /* rgb(235,240,240)*/
  --bg-white:  var(--neutrals-grey-00);   /* #fff            */

  /* ── Semantic ink ──────────────────────────────────────────────── */
  --ink:         var(--neutrals-grey-950);
  --ink-inverse: var(--neutrals-grey-10);
  --ink-muted:   var(--neutrals-grey-300); /* rgb(137,146,146) */
  --ink-subtle:  var(--neutrals-grey-200); /* rgb(154,165,165) */
  --ink-faint:   var(--neutrals-grey-100); /* rgb(182,191,191) */
  --hairline:    var(--neutrals-grey-50);  /* rgb(208,217,217) */

  /* ── Accent ────────────────────────────────────────────────────── */
  --accent:      var(--accent-nova);   /* rgb(0,239,202) */
  --accent-flux: var(--accent-flux);   /* rgb(3,211,179) */
  --forge:       var(--secondary-forge);
  --helix:       var(--secondary-helix);
}

/* ── Reset / base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-paper);
  font-feature-settings: "ss01", "cv01";
}

/* ───────────────────────────────────────────────────────────────────────
   TYPOGRAPHIC SYSTEM
   Class utilities mirroring the brand's deck specimen.
   ─────────────────────────────────────────────────────────────────────── */

/* Display serif — KH Giga. Oversized numerals, drop letters, hero serif. */
.ss-display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.83;
  letter-spacing: -0.03em;
}

/* Hero / headline — KH Teka, tight tracking, near-solid leading. */
.ss-hero {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 170px);
  line-height: 0.86;
  letter-spacing: -0.05em;
}
.ss-h1 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 94px);
  line-height: 0.88;
  letter-spacing: -0.05em;
}
.ss-h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.ss-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 1.8vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* Body — KH Teka. */
.ss-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.ss-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* Mono — KH Teka Mono. Labels, captions, technical chrome. */
.ss-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.ss-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}