/* Kaligraf Design — Typography
   @font-face declarations, typographic utility classes, multilingual overrides.
   Depends on: design-system.css (must load first)
   Source: spec/phase-2/00-design-foundation.md §1 */

/* ── @font-face — Local Woff2 Files ──────────────────────
   These declarations are fallbacks when Google Fonts is unavailable.
   Font files are expected at src/fonts/*.woff2
   ─────────────────────────────────────────────────────── */

/* NOTE: src/fonts/ is empty — the local woff2 files were never delivered, so
   these @font-face blocks 503'd on every page load (4 failed requests). Removed.
   Fonts now load solely from the Google Fonts stylesheet imported in
   design-system.css. To self-host later (faster, no third-party): add the
   woff2 files to src/fonts/ and restore @font-face declarations here. */

/* ── Base ─────────────────────────────────────────────── */

html {
  font-family: var(--font-family-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* ── Typographic Utility Classes — Desktop ────────────── */

.display-xl {
  font-family: var(--font-family-display);
  font-size: var(--size-display-xl);
  font-weight: 700;
  letter-spacing: var(--ls-display-xl);
  line-height: var(--lh-display-xl);
}

.display-lg {
  font-family: var(--font-family-display);
  font-size: var(--size-display-lg);
  font-weight: 700;
  letter-spacing: var(--ls-display-lg);
  line-height: var(--lh-display-lg);
}

.h1 {
  font-family: var(--font-family-display);
  font-size: var(--size-h1);
  font-weight: 700;
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
}

.h2 {
  font-family: var(--font-family-display);
  font-size: var(--size-h2);
  font-weight: 700;
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
}

.h3 {
  font-family: var(--font-family-body);
  font-size: var(--size-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-h3);
}

.h4 {
  font-family: var(--font-family-body);
  font-size: var(--size-h4);
  font-weight: 600;
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-h4);
}

.body-lg {
  font-family: var(--font-family-body);
  font-size: var(--size-body-lg);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body-lg);
}

.body-md {
  font-family: var(--font-family-body);
  font-size: var(--size-body-md);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body-md);
}

.body-sm {
  font-family: var(--font-family-body);
  font-size: var(--size-body-sm);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body-sm);
}

/* ui-label is always uppercase — no exceptions */
.ui-label {
  font-family: var(--font-family-body);
  font-size: var(--size-ui-label);
  font-weight: 500;
  letter-spacing: var(--ls-ui-label);
  line-height: var(--lh-ui-label);
  text-transform: uppercase;
}

.caption {
  font-family: var(--font-family-body);
  font-size: var(--size-caption);
  font-weight: 400;
  letter-spacing: var(--ls-caption);
  line-height: var(--lh-caption);
}

/* ── Tablet Overrides ─────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
  .display-xl { font-size: var(--size-display-xl-tablet); }
  .display-lg { font-size: var(--size-display-lg-tablet); }
  .h1         { font-size: var(--size-h1-tablet); }
  .h2         { font-size: var(--size-h2-tablet); }
  .h3         { font-size: var(--size-h3-tablet); }
}

/* ── Mobile Overrides ─────────────────────────────────── */

@media (max-width: 767px) {
  .display-xl { font-size: var(--size-display-xl-mobile); }
  .display-lg { font-size: var(--size-display-lg-mobile); }
  .h1         { font-size: var(--size-h1-mobile); }
  .h2         { font-size: var(--size-h2-mobile); }
  .h3         { font-size: var(--size-h3-mobile); }
  .h4         { font-size: var(--size-h4-mobile); }
  .body-lg    { font-size: var(--size-body-lg-mobile); }
}

/* ── Multilingual Line-Height Overrides ───────────────── */

/* ZH: Han glyphs have inherent internal spacing — tight leading is correct */
[lang="zh"] .display-xl { line-height: 0.98; }
[lang="zh"] .display-lg { line-height: 1.02; }
[lang="zh"] .h1         { line-height: 1.05; }
[lang="zh"] .h2         { line-height: 1.08; }
[lang="zh"] .body-lg    { line-height: 1.45; }
[lang="zh"] .body-md    { line-height: 1.45; }

/* PL: diacritics + longer words require extra vertical breathing room */
[lang="pl"] .display-xl { line-height: 1.06; }
[lang="pl"] .display-lg { line-height: 1.10; }
[lang="pl"] .h1         { line-height: 1.16; }
[lang="pl"] .h2         { line-height: 1.20; }
[lang="pl"] .body-lg    { line-height: 1.78; }
[lang="pl"] .body-md    { line-height: 1.78; }

/* ── Link Styles ──────────────────────────────────────── */

/* Inline links (in body copy) */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(currentColor, 0.38);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color 150ms var(--ease-standard),
    text-decoration-color 150ms var(--ease-standard);
}

a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 1px;
}

/* ── Standalone CTA Links ─────────────────────────────── */
/* e.g. "View the work →" — used in nav, section footers, related content */

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family-body);
  font-size: var(--size-ui-label);
  font-weight: 500;
  letter-spacing: var(--ls-ui-label);
  line-height: var(--lh-ui-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent);
  position: relative;
}

/* hover-underline token: ::after draws from left to right */
.link-cta::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width var(--motion-hover-underline) var(--ease-out);
}

.link-cta:hover::after {
  width: 100%;
}

/* Directional arrow translateX(4px) on hover */
.link-cta__arrow {
  display: inline-block;
  transition: transform var(--motion-hover-underline) var(--ease-out);
}

.link-cta:hover .link-cta__arrow {
  transform: translateX(4px);
}

.link-cta:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 1px;
}

/* ── Pull Quote ───────────────────────────────────────── */

.pull-quote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--component-gap-sm);
  margin-left: 0;
}