/* Dusky-white: the Storefront's light-mode sibling of Odin's dark-first
   Emberfall system (Odin/docs/web/DESIGN_SYSTEM.md, Odin/frontend/src/styles/tokens.css).
   Same accent, same type stack, same spacing/motion/radius/shadow language —
   the relationship should read at a glance. Ground is a warm, muted
   off-white ("dusky"), never stark white. Values here are this repo's own;
   deviations from Emberfall are deliberate (warm neutral vs. Emberfall's
   cool graphite-blue), not drift. */

/* Served from this site, not Google's: a font fetched from a third party
   hands it every visitor's IP address. Latin subset, variable weight. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/public-sans-latin.woff2) format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2");
}

:root {
  color-scheme: light;

  /* A step darker than the first dusky white, so the walk into the dark
     product band below the hero is less of a jump. */
  --bg: #e9e5dd; /* dusky white — warm, muted stone, not stark white */
  --bg-raise: #dfdad0; /* nav, footer, raised ground */
  --surface: #f6f4ef; /* cards, the contact form */
  --surface-2: #efece5; /* nested/hover surfaces */
  --line: rgba(28, 27, 24, 0.1);
  --line-strong: rgba(28, 27, 24, 0.18);
  --ink: #1c1b18;
  --ink-mute: #5c5a54;
  --ink-faint: #9b978d; /* non-text only, same rule as Emberfall */

  --accent: #f07a29; /* the ember — same hex as Emberfall, unchanged */
  --accent-ink: #a04b0e; /* darkened for AA text contrast on every light ground */
  --accent-bg: rgba(240, 122, 41, 0.1);
  --amber: #e0a83c; /* Odin's amber (its --warn), the raven behind the hero */
  --ok: #2f7d57;
  --ok-bg: rgba(47, 125, 87, 0.1);
  --warn: #9c6b12;
  --glow: 0 0 24px rgba(240, 122, 41, 0.14);

  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Public Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --radius: 10px;
  --radius-sm: 7px;
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 32px rgba(28, 27, 24, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-slow: 420ms;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* The nav lies over the top of each page; its first section makes room. */
  --nav-height: 64px;

  /* Long-form measure. The blog is the first surface with body copy long
     enough for line length to matter; ~68 characters is the middle of the
     range an eye tracks without losing the return sweep. */
  --measure: 68ch;

  --focus-ring: 2px solid var(--accent);
  /* near-black, as in Odin: white on the ember measured 2.8:1 */
  --ink-on-accent: #1c1b18;

  /* Emberfall's page ground, for the gradients that walk into and out of
     the .emberfall band */
  --odin-bg: #0b1017;
}

/* Emberfall itself, verbatim from Odin's tokens.css, for the stretch of the
   landing page that shows the product. Anything inside .emberfall reads the
   same token names and so renders as Odin does. */
.emberfall {
  color-scheme: dark;
  --bg: #0b1017;
  --bg-raise: #10161f;
  --surface: #131a25;
  --surface-2: #182130;
  --line: rgba(148, 170, 197, 0.14);
  --line-strong: rgba(148, 170, 197, 0.26);
  --ink: #e8edf4;
  --ink-mute: #909dae;
  --ink-faint: #5c6879;
  --accent-ink: #ffb37a;
  --accent-bg: rgba(240, 122, 41, 0.12);
  --ok: #58a982;
  --ok-bg: rgba(88, 169, 130, 0.12);
  --warn: #e0a83c;
  --glow: 0 0 24px rgba(240, 122, 41, 0.18);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.35);
  --ink-on-accent: #0a0a0a;
  color: var(--ink);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

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