/* ============================================================
   HINT — openhint.dev
   Shared design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root {
  --paper:      #F6F4EE;
  --paper-2:    #EFEBE1;
  --paper-3:    #E7E2D5;
  --ink:        #16181D;
  --ink-2:      #3C414A;
  --ink-3:      #777C86;
  --line:       rgba(22,24,29,0.12);
  --line-2:     rgba(22,24,29,0.07);

  /* dark "compile" surface */
  --surface:    #14161A;
  --surface-2:  #1B1E24;
  --surface-3:  #23272E;
  --on-surface: #E8E4D9;
  --on-surface-mut: #8B919C;

  /* accent — core HINT / software engineering */
  --accent:        #5746E6;
  --accent-bright: #9286FF;
  --accent-soft:   rgba(87,70,230,0.10);
  --accent-line:   rgba(87,70,230,0.28);
  --accent-2:      #3FB6A8; /* teal complement */

  /* syntax tokens (used on dark surface) */
  --tok-tag:  var(--accent-bright);
  --tok-name: #EDE9DF;
  --tok-id:   #5FD0C2;
  --tok-mut:  #6E7480;
  --tok-body: #B6BBC4;
  --tok-str:  #D9B27C;

  --maxw: 1180px;
  --radius: 4px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* law theme override */
[data-accent="law"] {
  --accent:        #1C7A4F;
  --accent-bright: #5BC48E;
  --accent-soft:   rgba(28,122,79,0.10);
  --accent-line:   rgba(28,122,79,0.26);
  --accent-2:      #C49A4C;
  --tok-tag:  var(--accent-bright);
  --tok-id:   #D8AE63;
  --tok-str:  #C9A777;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 32px; }
.section { padding-block: clamp(72px, 9vw, 132px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.divider { border-top: 1px solid var(--line); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); }
.display {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.03em; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.02em; }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--ink-2); font-weight: 400; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: 0.6; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
strong { font-weight: 600; color: var(--ink); }
.accent-text { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.86rem; font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(0,0,0,0.02); }
.btn--on-dark { background: var(--on-surface); color: var(--surface); }
.btn--on-dark:hover { background: #fff; transform: translateY(-1px); }
.btn--ghost-dark { border-color: rgba(255,255,255,0.18); color: var(--on-surface); }
.btn--ghost-dark:hover { border-color: rgba(255,255,255,0.4); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line-2);
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav__link {
  font-size: 0.92rem; color: var(--ink-2); font-weight: 500;
  transition: color .18s ease; position: relative;
}
.nav__link:hover { color: var(--ink); }
.nav__link--active { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__menu-btn { display: none; }
.nav__github { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-family: var(--font-mono); font-size: 0.82rem; transition: color .18s; }
.nav__github:hover { color: var(--ink); }
.nav__github svg { width: 17px; height: 17px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: flex-end; gap: 5px; }
.logo__img { height: 30px; width: auto; display: block; }
.logo__dev { font-family: var(--font-mono); font-weight: 500; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--ink-3); line-height: 1; padding-bottom: 3px; }
.footer__logo .logo__img { filter: brightness(0) invert(1); }
.footer__logo .logo__dev { color: var(--on-surface-mut); }
/* legacy mark (unused) */
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.04em; color: var(--ink); }
.logo__word .dim { color: var(--ink-3); font-weight: 500; }

/* ---------- Code panels ---------- */
.code {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
  box-shadow: 0 24px 60px -28px rgba(16,18,24,0.5), 0 2px 0 rgba(255,255,255,0.02) inset;
}
.code__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: var(--surface-2);
}
.code__dots { display: flex; gap: 6px; }
.code__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.code__file { font-size: 0.78rem; color: var(--on-surface-mut); letter-spacing: 0.01em; }
.code__file b { color: var(--on-surface); font-weight: 500; }
.code__bar:has(.code__tag) { padding-right: 80px; }
.code__tag {
  margin-left: auto; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-bright); padding: 3px 9px; border: 1px solid var(--accent-line);
  border-radius: 100px;
}
.code__body {
  padding: 20px 22px;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--tok-body);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.code__body::-webkit-scrollbar { height: 8px; }
.code__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.code--scroll .code__body { max-height: 460px; overflow-y: auto; }
.code__copy {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--on-surface-mut); padding: 5px 9px; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px; transition: all .18s; text-transform: uppercase;
}
.code__copy:hover { color: var(--on-surface); border-color: rgba(255,255,255,0.3); }
.code-wrap { position: relative; }

/* syntax tokens */
.t-h   { color: var(--tok-mut); }     /* markdown # */
.t-kw  { color: var(--accent-bright); font-weight: 600; }  /* hint keyword */
.t-nm  { color: var(--tok-name); }    /* name */
.t-id  { color: var(--tok-id); }      /* {#id} */
.t-tag { color: var(--tok-tag); }     /* compiled <tag> */
.t-at  { color: var(--tok-id); }      /* attribute */
.t-mut { color: var(--tok-mut); }     /* punctuation/comment */
.t-str { color: var(--tok-str); }     /* string-ish / values */
.t-cm  { color: var(--tok-mut); font-style: italic; }
.t-bd  { color: var(--tok-body); }

/* light inline code */
code.inl {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--paper-3); color: var(--ink);
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-2);
}
.on-dark code.inl { background: rgba(255,255,255,0.08); color: var(--on-surface); border-color: rgba(255,255,255,0.1); }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card--hover:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(16,18,24,0.35); }

/* ---------- Footer ---------- */
.footer { background: var(--surface); color: var(--on-surface); padding-block: 72px 40px; }
.footer a { color: var(--on-surface-mut); transition: color .18s; }
.footer a:hover { color: var(--on-surface); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__col h5 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-mut); margin-bottom: 16px; font-weight: 500; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col li { font-size: 0.92rem; }
.footer__brand p { color: var(--on-surface-mut); font-size: 0.92rem; max-width: 30ch; margin-top: 16px; }
.footer__logo .logo__word { color: var(--on-surface); }
.footer__logo .logo__word .dim { color: var(--on-surface-mut); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.09); font-size: 0.82rem; color: var(--on-surface-mut); font-family: var(--font-mono); flex-wrap: wrap; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }
.reveal[data-d="4"] { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line);
  color: var(--ink-2); background: var(--paper);
}
.pill--soon { color: var(--ink-3); border-style: dashed; }
.pill--on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.dot-ok { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }

/* keyword chip */
.kw {
  font-family: var(--font-mono); font-size: 0.8rem;
  background: var(--surface); color: var(--accent-bright);
  padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08);
  display: inline-block;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 22px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .nav__links { display: none; }
  .nav__github span { display: none; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav__inner { gap: 14px; }
}