/* ──────────────────────────────────────────────────────────────
   Gabriel Hermógenes — Foundations
   Mono palette + SF / Rethink type system
   ────────────────────────────────────────────────────────────── */

/* ── FONT FACES ─────────────────────────────────────────────── */

@font-face {
  font-family: "SF NS Display";
  src: url("SFNSDisplay-Ultralight.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Display";
  src: url("SFNSDisplay-Thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Display";
  src: url("SFNSDisplay-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Display";
  src: url("SFNSDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Display";
  src: url("SFNSDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Display";
  src: url("SFNSDisplay-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Display";
  src: url("SFNSDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Display";
  src: url("SFNSDisplay-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Display";
  src: url("SFNSDisplay-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF NS Text";
  src: url("SFNSText-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Text";
  src: url("SFNSText-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Text";
  src: url("SFNSText-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Text";
  src: url("SFNSText-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Text";
  src: url("SFNSText-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF NS Text";
  src: url("SFNSText-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("RethinkSans-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* ── DESIGN TOKENS ──────────────────────────────────────────── */

:root {
  /* Mono palette — the only palette */
  --gh-white:  #FFFFFF;
  --gh-100:    #F2F2F2;   /* light background */
  --gh-200:    #BFBFBF;   /* secondary / hairlines on dark */
  --gh-300:    #737373;   /* mid-tone, body on dark, captions */
  --gh-400:    #404040;   /* dark accent, surfaces */
  --gh-900:    #0D0D0D;   /* near-black, primary surface */
  --gh-black:  #000000;

  /* Semantic foreground / background */
  --bg-page:        var(--gh-100);
  --bg-surface:     var(--gh-white);
  --bg-elevated:    var(--gh-white);
  --bg-inverse:     var(--gh-900);
  --bg-inverse-2:   var(--gh-400);

  --fg-primary:     var(--gh-900);
  --fg-secondary:   var(--gh-400);
  --fg-tertiary:    var(--gh-300);
  --fg-quaternary:  var(--gh-200);
  --fg-on-inverse:  var(--gh-100);
  --fg-on-inverse-2:var(--gh-200);

  --hairline:        rgba(13,13,13, 0.08);
  --hairline-strong: rgba(13,13,13, 0.16);
  --hairline-inverse: rgba(242,242,242, 0.12);

  /* Type families */
  --font-display: "SF NS Display", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-text:    "SF NS Text", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-rethink: "Rethink Sans", "SF NS Display", -apple-system, system-ui, sans-serif;
  --font-mono:    "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (Apple-leaning, generous) — line-heights & tracking are unitless/em, tag as font */
  --fs-eyebrow:   12px;   --lh-eyebrow:  1.25; /* @kind font */  --tk-eyebrow:  0.08em; /* @kind font */
  --fs-caption:   13px;   --lh-caption:  1.45; /* @kind font */
  --fs-body:      17px;   --lh-body:     1.5; /* @kind font */
  --fs-body-lg:   19px;   --lh-body-lg:  1.5; /* @kind font */
  --fs-lead:      22px;   --lh-lead:     1.42; /* @kind font */
  --fs-h4:        28px;   --lh-h4:       1.2; /* @kind font */
  --fs-h3:        40px;   --lh-h3:       1.1; /* @kind font */
  --fs-h2:        56px;   --lh-h2:       1.05; /* @kind font */
  --fs-h1:        80px;   --lh-h1:       1.0; /* @kind font */
  --fs-display:   112px;  --lh-display:  0.98; /* @kind font */

  /* Tracking (letter-spacing) */
  --tk-tight:     -0.025em; /* @kind font */
  --tk-tighter:   -0.035em; /* @kind font */
  --tk-normal:    0; /* @kind font */
  --tk-wide:      0.04em; /* @kind font */

  /* Spacing — 4pt grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Radii — soft Apple-ish */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Elevation — very restrained, no colored shadows */
  --shadow-1: 0 1px 2px rgba(13,13,13, 0.06), 0 1px 1px rgba(13,13,13, 0.04);
  --shadow-2: 0 8px 24px rgba(13,13,13, 0.08), 0 2px 6px rgba(13,13,13, 0.04);
  --shadow-3: 0 24px 56px rgba(13,13,13, 0.14), 0 6px 16px rgba(13,13,13, 0.06);
  --shadow-inset: inset 0 0 0 1px var(--hairline);

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.5, 0, 0.75, 0); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-base:      200ms; /* @kind other */
  --dur-slow:      360ms; /* @kind other */

  /* Layout */
  --container:     1200px; /* @kind spacing */
  --container-tight: 880px; /* @kind spacing */
}

/* ── BASE ───────────────────────────────────────────────────── */

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── SEMANTIC TYPE ──────────────────────────────────────────── */

.gh-eyebrow {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.gh-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tk-tighter);
}

.gh-h1, h1.gh {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tk-tight);
  margin: 0;
}

.gh-h2, h2.gh {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tk-tight);
  margin: 0;
}

.gh-h3, h3.gh {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tk-tight);
  margin: 0;
}

.gh-h4, h4.gh {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.015em;
  margin: 0;
}

.gh-lead, p.gh-lead {
  font-family: var(--font-display);
  font-weight: 200;             /* the "Thin" voice */
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: -0.01em;
  color: var(--fg-secondary);
  margin: 0;
}

.gh-body, p.gh {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  margin: 0;
}

.gh-body-lg {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.gh-caption, small.gh {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-tertiary);
}

.gh-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--fg-secondary);
}

/* Inverse / dark surface helpers */
.gh-inverse {
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
}
.gh-inverse .gh-lead,
.gh-inverse .gh-caption,
.gh-inverse small.gh { color: var(--fg-on-inverse-2); }

/* ── PRIMITIVES ─────────────────────────────────────────────── */

.gh-hairline { border-top: 1px solid var(--hairline); }
.gh-hairline-strong { border-top: 1px solid var(--hairline-strong); }

.gh-card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-inset), var(--shadow-1);
}

.gh-card-elev {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}