/* ============================================================
   LVRD — Foundations
   Typography + Color tokens (light + dark)
   ============================================================ */

/* ---------- Web fonts (self-hosted) ----------
   Satoshi (Fontshare) + Instrument Serif (Google Fonts), self-hosted as
   woff2 in /assets/fonts so they load same-origin (HTTP/2, Brotli, edge
   cache) instead of via render-blocking external @import chains. Weights
   match what Fontshare served (300/400/500/700/900); font-display: swap.
   --------------------------------------------- */
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrumentserif-italic-1.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrumentserif-italic-2.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrumentserif-normal-3.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrumentserif-normal-4.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Type families ----------
     Sans  — Satoshi. Workhorse for everything: UI, body, display.
     Serif — Instrument Serif. ITALIC-ONLY accent. Used selectively
             on the turn of a sentence — the pivot, the named thing,
             the emphasized clause. Never set in roman; never used
             at small UI sizes. Pairs with Satoshi at matching size
             without compensation. Don't use for body copy or lists.
     Mono  — System mono. Captions, timestamps, log rows.
  --------------------------------------- */
  --font-sans:  "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Marian", "Marian Text", "Instrument Serif", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --font-mono:  ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---------- Type scale (size / line-height / weight) ---------- */
  --type-display-size: 48px;
  --type-display-line: 52px;
  --type-display-weight: 700;

  --type-h1-size: 32px;
  --type-h1-line: 38px;
  --type-h1-weight: 600;

  --type-h2-size: 24px;
  --type-h2-line: 30px;
  --type-h2-weight: 600;

  --type-h3-size: 18px;
  --type-h3-line: 24px;
  --type-h3-weight: 600;

  --type-body-size: 16px;
  --type-body-line: 26px;
  --type-body-weight: 400;

  --type-body-sm-size: 14px;
  --type-body-sm-line: 22px;
  --type-body-sm-weight: 400;

  --type-caption-size: 12px;
  --type-caption-line: 18px;
  --type-caption-weight: 500;

  --type-mono-size: 14px;
  --type-mono-line: 22px;
  --type-mono-weight: 400;

  /* ---------- Smoke (neutral canvas) ---------- */
  --smoke-50:  #FBFBFC;
  --smoke-100: #EAEAEC;
  --smoke-200: #DDDDE0;
  --smoke-300: #C4C4C8;
  --smoke-400: #8E8E94;
  --smoke-500: #78797E;
  --smoke-600: #56565C;
  --smoke-700: #3A3A3F;
  --smoke-800: #232326;
  --smoke-900: #161618;

  /* ---------- Deep Spectrum accent ---------- */
  --windsor:   #0D1126;
  --space:     #1A224C;
  --astronaut: #263373;
  --marian:    #31439B;
  /* Lifted brand blue — only used inside .dark surfaces. The four
     deep spectrum tints are all too dark to read against #161618;
     this is a brand-extended lift that keeps the hue family but
     clears WCAG AA. Never used in light mode. */
  --marian-lift: oklch(0.78 0.135 269);
  --marian-bright: oklch(0.87 0.10 269);

  /* ---------- Semantic (light mode default) ---------- */
  --bg:          var(--smoke-50);
  --surface:     var(--smoke-100);
  --surface-2:   #FFFFFF;
  --border:      var(--smoke-200);
  --border-strong: var(--smoke-300);
  --fg:          var(--smoke-800);   /* primary text */
  --fg-strong:   var(--smoke-900);
  --fg-muted:    var(--smoke-600);
  --fg-subtle:   var(--smoke-500);
  --fg-faint:    var(--smoke-400);
  --fg-disabled: var(--smoke-300);
  --fg-on-accent: var(--smoke-50);

  --accent:        var(--space);      /* primary CTA */
  --accent-hover:  var(--astronaut);
  --accent-press:  var(--windsor);
  --accent-ring:   color-mix(in oklab, var(--space) 35%, transparent);

  --focus-ring: 0 0 0 3px var(--accent-ring);

  /* ---------- Spacing scale ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ---------- Motion ---------- */
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-default: 300ms;
  --duration-slow:    500ms;
  --duration-breath:  800ms;

  --easing-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --easing-subtle:  cubic-bezier(0.45, 0, 0.55, 1);
  --easing-breath:  cubic-bezier(0.37, 0, 0.63, 1);

  /* ---------- Elevation (used sparingly — atmospheric, not lifted) ---------- */
  --shadow-1: 0 1px 0 rgba(22, 22, 24, 0.04), 0 1px 2px rgba(22, 22, 24, 0.04);
  --shadow-2: 0 1px 0 rgba(22, 22, 24, 0.04), 0 8px 24px -12px rgba(22, 22, 24, 0.12);
  --shadow-3: 0 1px 0 rgba(22, 22, 24, 0.05), 0 24px 60px -24px rgba(22, 22, 24, 0.20);

  /* ---------- Accent separator (the only sanctioned gradient) ---------- */
  --accent-line: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--windsor) 50%, transparent) 30%,
    color-mix(in oklab, var(--astronaut) 50%, transparent) 70%,
    transparent 100%
  );
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"],
.dark {
  --bg:        var(--smoke-900);
  --surface:   #1C1C1F;
  --surface-2: #232326;
  --border:    #2C2C30;
  --border-strong: #3A3A3F;
  --fg:        var(--smoke-50);
  --fg-strong: #FFFFFF;
  --fg-muted:  var(--smoke-300);
  --fg-subtle: var(--smoke-400);
  --fg-faint:  var(--smoke-500);
  --fg-disabled: var(--smoke-600);
  --fg-on-accent: var(--smoke-900);

  --accent:       var(--marian-lift);
  --accent-hover: var(--marian-bright);
  --accent-press: var(--marian);
  --accent-ring:  color-mix(in oklab, var(--marian-lift) 40%, transparent);
}

/* ============================================================
   Semantic element styles — use these directly on tags
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  font-weight: var(--type-display-weight);
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}

h1, .h1 {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--type-h1-weight);
  letter-spacing: -0.015em;
  color: var(--fg-strong);
}

h2, .h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--type-h2-weight);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}

h3, .h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--type-h3-weight);
  letter-spacing: -0.005em;
  color: var(--fg-strong);
}

p, .body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  color: var(--fg);
  text-wrap: pretty;
}

small, .body-small {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
  color: var(--fg-muted);
}

.caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight);
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-line);
  font-weight: var(--type-mono-weight);
}

/* ---------- Emphasis: serif italic ----------
   <em> across LVRD is Instrument Serif italic. It carries the
   "turn" — the pivot inside a sentence where the meaning shifts.
   Use sparingly; once a paragraph is the ceiling.
   `.serif` lets you opt into the same treatment on any element
   without relying on <em>'s semantics. Both inherit weight and
   color so they slot inside headlines or body without compensation.
------------------------------------------------- */
em, .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  /* Instrument Serif sits slightly smaller than Satoshi at the
     same px size; bump optical scale to match the x-height. */
  font-size: 1.06em;
  letter-spacing: -0.005em;
  /* Brand-wide: serif italic carries the LVRD ink blue.
     Inside dark surfaces, fall back to fg-strong (white) so the
     pivot stays legible against the navy field. */
  color: #31439B;
}
.dark em, .dark .serif,
[data-theme="dark"] em, [data-theme="dark"] .serif {
  color: var(--fg-strong);
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  transition: border-color var(--duration-fast) var(--easing-default);
}
a:hover { border-bottom-color: var(--accent); }

/* ---------- The LVRD wordmark ---------- */
.lvrd-wordmark {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-strong);
  display: inline-block;
}

/* ---------- Breath animation (LVRD-specific) ---------- */
@keyframes lvrd-breath {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.lvrd-breath {
  animation: lvrd-breath calc(var(--duration-breath) * 2.5) var(--easing-breath) infinite;
}

/* ---------- Accent separator line ---------- */
.lvrd-accent-line {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--accent-line);
  border: 0;
}

/* ---------- Focus ring (system-wide) ---------- */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}