/* ─────────────────────────────────────────────────────────────────────
   TRACE — re-skin + polish
   Built on the design-system colour tokens. Layers on the new
   direction: distinctive display type, a real elevation system,
   a fine grid backdrop, and restrained scroll motion.
   Palette / voice / content rules stay 1:1 with the system.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces / neutrals (from system) ─────────────────────────── */
  --bg:               #f6f7f3;
  --bg-elevated:      #fbfbf8;
  --bg-inset:         #eeefe9;
  --bg-dark:          #0b0a0f;
  --bg-dark-2:        #131218;

  /* ── Text ──────────────────────────────────────────────────────── */
  --fg:               #0b0a0f;
  --fg-strong:        #000000;
  --fg-muted:         #5a5a63;
  --fg-subtle:        #8a8a95;
  --fg-on-dark:       #f6f7f3;
  --fg-on-dark-muted: #9b9ba3;

  /* ── Accent (mint by default; switchable via Tweaks) ───────────── */
  --accent:           #00cd9c;
  --accent-ink:       #04221a;   /* text sitting on the accent fill */
  --accent-deep:      color-mix(in srgb, var(--accent), #000 20%);
  --accent-text:      color-mix(in srgb, var(--accent), #000 42%);  /* on light, AA */
  --accent-soft:      color-mix(in srgb, var(--accent) 16%, #fff);
  --accent-edge:      color-mix(in srgb, var(--accent) 34%, #fff);
  --accent-glow:      color-mix(in srgb, var(--accent) 22%, transparent);

  /* ── Lines ─────────────────────────────────────────────────────── */
  --line:             #e3e3dc;
  --line-strong:      #c9c9c0;
  --line-on-dark:     rgba(255,255,255,0.09);
  --warning:          #c98a00;
  --danger:           #c0463a;
  --focus-ring:       0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* ── Elevation system (soft, neutral, light-from-above) ────────── */
  --elev-1: 0 1px 2px rgba(11,10,15,.05), 0 1px 1px rgba(11,10,15,.04);
  --elev-2: 0 2px 4px -1px rgba(11,10,15,.05), 0 8px 18px -8px rgba(11,10,15,.10);
  --elev-3: 0 4px 8px -3px rgba(11,10,15,.06), 0 20px 40px -14px rgba(11,10,15,.14);
  --elev-4: 0 8px 16px -6px rgba(11,10,15,.07), 0 36px 72px -20px rgba(11,10,15,.18);
  --elev-float: 0 14px 28px -10px rgba(11,10,15,.10), 0 56px 110px -28px rgba(11,10,15,.24);
  --elev-dark: 0 4px 10px -2px rgba(0,0,0,.5), 0 30px 60px -18px rgba(0,0,0,.6);

  /* ── Radii (a touch larger than system, per "large-radius") ────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ── Spacing (4px base) ────────────────────────────────────────── */
  --gutter: 32px;
  --maxw: 1160px;

  /* ── Type ──────────────────────────────────────────────────────── */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --tracking-display: -0.03em;
  --tracking-tight: -0.018em;
  --tracking-eyebrow: 0.14em;

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --reveal-y: 22px;
}

/* Display-face switch (Tweaks) */
[data-display="schibsted"] { --font-display: "Schibsted Grotesk", "Hanken Grotesk", sans-serif; --tracking-display: -0.025em; }
[data-display="general"]   { --font-display: "General Sans", "Hanken Grotesk", sans-serif; --tracking-display: -0.02em; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.002em;
  position: relative;
  overflow-x: hidden;
}

/* ─── Fine grid backdrop (fades at edges, dissolves into page) ────── */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 32%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 32%, transparent 78%);
  opacity: .85;
  transition: opacity .3s ease;
}
[data-grid="off"] .grid-bg { opacity: 0; }

/* keep all real content above the backdrop */
.nav, main, footer { position: relative; z-index: 1; }

/* ─── Layout ──────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
main > section { padding: 116px 0; }

.eyebrow {
  font: 600 12px/1.4 var(--font-num);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
  display: inline-block;
}
.eyebrow.accent { color: var(--accent-text); }
.lead {
  font: 400 20px/1.6 var(--font-body);
  color: var(--fg-muted);
  max-width: 52ch;
  text-wrap: pretty;
  margin: 0;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }

/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn {
  font: 600 15.5px/1 var(--font-body);
  letter-spacing: -0.005em;
  border-radius: var(--r-md);
  padding: 0 20px;
  height: 46px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, var(--elev-2), 0 6px 22px -8px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: var(--elev-3), 0 14px 34px -10px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16.5px; border-radius: var(--r-md); }
.btn-ghost {
  background: var(--bg-elevated);
  color: var(--fg);
  border-color: var(--line-strong);
  box-shadow: var(--elev-1);
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.btn .ico { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
.btn-primary:hover .ico, .btn-ghost:hover .ico { transform: translateX(3px); }

/* ─── Scroll reveal ───────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}