/* ==========================================================================
   Cliff Hwang — Base / element defaults  v0.2
   Depends on tokens.css
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap");
/* Site-wide switch to one family, Noto Sans, per explicit direction — this
   is a deliberate design choice, not a measurement. It replaces Inter
   (body/UI) and Newsreader (display/editorial) both; --ch-font-display and
   --ch-font-body now resolve to the same family in tokens.css.
   Two weights only, 400 and 700 (500 and 600 not loaded; the
   --ch-weight-medium/-semibold/-bold tokens all resolve to 700 — the emphasis
   tier was 600 in v0.6, raised to 700). Italic 400 is kept for .ch-quote. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;   /* 16px root — 1rem = 16px. 100% (rather than a hard 16px)
                         honours a reader's browser font-size preference, which
                         is the whole reason the scale is expressed in rem. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ch-bg);
  color: var(--ch-text);
  font-family: var(--ch-font-body);
  font-size: var(--ch-body-size);
  line-height:normal;
  font-weight: var(--ch-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

img, svg, video { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ch-duration-fast) var(--ch-ease);
}
a:hover { color: var(--ch-link-hover); }
a:active { color: var(--ch-accent-pressed); }

a:focus-visible,
button:focus-visible {
  outline: 0.125rem solid var(--ch-focus-ring);
  outline-offset: 0.25rem;
  border-radius: var(--ch-radius-xs);
}

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection {
  background: var(--ch-accent);
  color: var(--ch-text-on-light);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   TYPE ROLES
   -------------------------------------------------------------------------- */

.ch-wordmark {
  font-family: var(--ch-font-display);
  font-weight: var(--ch-weight-semibold);
  font-size: var(--ch-wordmark-size);
  line-height:normal;
  letter-spacing: var(--ch-wordmark-ls);
  color: var(--ch-text);
}

.ch-hero {
  font-family: var(--ch-font-display);
  font-weight: var(--ch-weight-regular);
  font-size: var(--ch-hero-size);
  line-height:normal;
  letter-spacing: var(--ch-hero-ls);
  color: var(--ch-text);
  text-wrap: balance;
}

/* body-lg — large body text. .ch-hero-sub (lead paragraph) and .ch-card-body
   are DEPRECATED aliases: both computed Inter 20/32 desktop and 18/28 mobile,
   so the split was naming, not hierarchy. Delete once markup is migrated. */
.ch-body-lg,
.ch-hero-sub,
.ch-card-body {
  font-family: var(--ch-font-body);
  font-weight: var(--ch-weight-regular);
  font-size: var(--ch-body-lg-size);
  line-height:normal;
  letter-spacing: var(--ch-body-lg-ls);
  color: var(--ch-text-secondary);
}

.ch-section-heading {
  font-family: var(--ch-font-display);
  font-weight: var(--ch-weight-medium);
  font-size: var(--ch-section-size);
  line-height:normal;
  letter-spacing: var(--ch-section-ls);
  color: var(--ch-text-accent);
}

/* display-3. Renamed from .ch-card-title in v0.6 (it titles project cards);
   .ch-card-title is kept as a deprecated alias so any un-migrated markup still
   renders. Migrate to .ch-project-title, then drop the alias. */
.ch-project-title,
.ch-card-title {
  font-family: var(--ch-font-display);
  font-weight: var(--ch-weight-medium);
  font-size: var(--ch-project-title-size);
  line-height:normal;
  letter-spacing: var(--ch-project-title-ls);
  color: var(--ch-text);
  text-wrap: balance;
}

/* Metrics inside card body are lifted to full white */
.ch-card-body strong,
.ch-emph { font-weight: inherit; color: var(--ch-text); }

.ch-subhead {
  font-family: var(--ch-font-body);
  font-weight: var(--ch-weight-semibold);
  font-size: var(--ch-subhead-size);
  line-height:normal;
  letter-spacing: var(--ch-subhead-ls);
  color: var(--ch-text);
}

/* One body role. The v0.2 .ch-body-loose alias (16/28) was removed in v0.5 —
   it had 1 real usage against .ch-body's 16, a split that never earned its keep. */
.ch-body {
  font-family: var(--ch-font-body);
  font-weight: var(--ch-weight-regular);
  font-size: var(--ch-body-size);
  line-height:normal;
  color: var(--ch-text-secondary);
}

.ch-muted { color: var(--ch-text-muted); }

/* v0.5 removed three type roles that no shipping page used: .ch-serif (the
   oversized editorial italic — the home page "Type" is SVG text, not this),
   .ch-eyebrow / --lg / --accent (case studies use .ch-case-eyebrow instead),
   and .ch-caption. Their tokens are gone from tokens.css too. */

/* --------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.ch-page {
  max-width: var(--ch-page-max);
  margin-inline: auto;
}

.ch-container {
  max-width: var(--ch-content-max);
  margin-inline: auto;
  padding-inline: var(--ch-gutter);
}

.ch-section { padding-block-end: var(--ch-space-16); }

.ch-hero-section {
  padding: var(--ch-space-60) 0 var(--ch-space-40);   /* [was: 246 / 160] */
  display: flex;
  flex-direction: column;
  gap: var(--ch-space-24);                              /* [was: 100]       */
}

@media (max-width: 767.98px) {
  .ch-hero-section {
    padding: var(--ch-space-30) 0 var(--ch-space-20);
    gap: var(--ch-space-10);
  }
}

/* --------------------------------------------------------------------------
   LIGHT SURFACE
   For any section that inverts out of the dark theme. Flips text to the dark
   ink so contrast stays high (#121212 on #fafafa is 18.1:1).
   Surface is now Tailwind neutral-50; the Framer cream is gone with the rest
   of the decorative palette.
   -------------------------------------------------------------------------- */
.ch-on-light {
  background: var(--ch-surface-light);
  color: var(--ch-text-on-light);
}
.ch-on-light .ch-card-body,
.ch-on-light .ch-body,
.ch-on-light .ch-hero-sub { color: var(--ch-text-on-light); }
.ch-on-light .ch-section-heading { color: var(--ch-amber-700); }