/* =============================================================
   Global styles — @font-face, resets, base semantic styles
   ============================================================= */

/* @import must precede all other rules (CSS spec) */
@import "./tokens.css";

/* --- Fonts (self-hosted, served from /public/fonts/) --- */

@font-face {
  font-family: "Manrope";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Manrope-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Manrope";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Manrope-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Manrope";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Manrope-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Manrope";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Manrope-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Manrope";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Manrope-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Manrope";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Manrope-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Manrope";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Manrope-ExtraBold.ttf") format("truetype");
}

@font-face {
  font-family: "Newsreader";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Newsreader-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Newsreader";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/fonts/Newsreader-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Newsreader";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Newsreader-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Newsreader";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("/fonts/Newsreader-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Newsreader";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Newsreader-ExtraBold.ttf") format("truetype");
}

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

/* --- Base --- */
html {
  font-family: var(--font-sans);
  color: var(--on-surface);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--text-body-md);
  line-height: var(--leading-relaxed);
  color: var(--on-surface);
  background: var(--background);
}

/* --- Display (serif, editorial intent) --- */
.display-xl,
.display-lg,
.display-md {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--on-surface);
  margin: 0 0 var(--space-5) 0;
}
.display-xl { font-size: var(--text-display-xl); }
.display-lg { font-size: var(--text-display-lg); }
.display-md { font-size: var(--text-display-md); }

/* --- Headlines (serif, authoritative) --- */
h1, .headline-lg,
h2, .headline-md,
h3, .headline-sm {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--on-surface);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-4) 0;
}
h1, .headline-lg { font-size: var(--text-headline-lg); }
h2, .headline-md { font-size: var(--text-headline-md); }
h3, .headline-sm { font-size: var(--text-headline-sm); }

/* --- Titles (sans, structural labels) --- */
h4, .title-lg,
h5, .title-md {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3) 0;
}
h4, .title-lg { font-size: var(--text-title-lg); }
h5, .title-md { font-size: var(--text-title-md); }

/* --- Body --- */
p, .body-md {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body-md);
  line-height: var(--leading-relaxed);
  color: var(--on-surface);
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
}
.body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
}
.body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--on-surface-variant);
}

/* --- Labels (muted, all-caps) --- */
.label-md,
.label-sm {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--on-surface-variant);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin: 0;
}
.label-md { font-size: var(--text-label-md); }
.label-sm { font-size: var(--text-label-sm); }

/* --- Lead (serif italic, editorial aside) --- */
.lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--on-surface-variant);
  line-height: var(--leading-relaxed);
}

/* --- Mono --- */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--on-surface);
}

/* --- Links (editorial, underline on hover) --- */
a {
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(120, 95, 83, 0.3);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
a:hover {
  color: var(--secondary-dim);
  border-bottom-color: currentColor;
}

/* --- Selection (warm, not blue) --- */
::selection {
  background: rgba(120, 95, 83, 0.18);
  color: var(--on-surface);
}

/* --- Ghost border utilities --- */
.ghost-border        { border: var(--ghost-border); }
.ghost-border-bottom { border-bottom: var(--ghost-border); }

/* --- Section link — black serif italic, underlined, larger.
       Placed at the bottom of its respective box or article.
       Italics are reserved for links + the Bifrost wordmark. --- */
.section-link {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-title-lg);   /* 1.125rem — larger than body */
  color: var(--on-surface);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 4px;
  border-bottom: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.section-link:hover {
  color: var(--on-surface);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  border-bottom: none;
  opacity: 0.78;
}
.section-link--ink {
  color: var(--ink-text);
}
.section-link--ink:hover {
  color: var(--ink-text);
}

/* --- Focus ring --- */
:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
  opacity: 0.4;
}
