/* ==========================================================================
   INTERAIQ — design tokens + shared dark theme
   Linked by every page after its own styles. Page stylesheets keep their
   legacy variable names (--paper, --ink, --mute, --line); they are re-pointed
   here so the whole site resolves to one palette.
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Color */
  --c-bg: #0B0B0D;                       /* page background (Charcoal) */
  --c-bg-2: #0F0F12;                     /* alternate section */
  --c-surface: #141418;                  /* cards */
  --c-surface-2: #1B1B21;                /* raised: chrome bars, inputs on hover */
  --c-text: #F7F7F8;                     /* Off-white */
  --c-text-2: rgba(247,247,248,.68);     /* body copy */
  --c-text-3: rgba(247,247,248,.54);     /* labels, meta (AA on all surfaces) */
  --c-indigo: #4F6BFF;
  --c-indigo-ui: #4059E6;                /* darker cobalt behind small white text (5.5:1, AA) */
  --c-indigo-hi: #8FA0FF;                /* lighter cobalt for dark-surface interactions */
  --c-indigo-soft: #9EACFF;              /* cobalt text on charcoal (AA) */
  --c-indigo-glow: rgba(79,107,255,.32);
  --c-danger: #F97066;

  /* Borders */
  --c-line: rgba(247,247,248,.09);
  --c-line-2: rgba(247,247,248,.18);
  --c-line-accent: rgba(79,107,255,.32);
  --c-line-accent-hi: rgba(143,160,255,.72);

  /* Typography (existing families) */
  --f-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --f-body: 'Instrument Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --t-label: 11px;
  --t-body: 17px;
  --t-lede: 19px;
  --t-h3: clamp(28px, 2.4vw, 38px);
  --t-h2: clamp(52px, 7.6vw, 124px);

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  /* Section rhythm: generous, but capped so adjacent sections do not create voids. */
  --s-section: clamp(88px, 8vw, 120px);
  --s-route-section: clamp(80px, 7vw, 112px);
  --s-section-bridge: clamp(40px, 3.3vw, 48px);
  --gutter: 40px;

  /* Surfaces */
  --r-window: 12px;                      /* browser windows */
  --r-leaf: 0 28px 0 28px;               /* card corners, from the logo petals */
  --r-leaf-sm: 0 16px 0 16px;
  --shadow-float: 0 50px 110px -40px rgba(0,0,0,.85);

  /* Motion */
  --d-fast: .2s;
  --d-base: .45s;
  --d-slow: .8s;
  --d-cine: 1.2s;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.7,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}
@media (max-width: 860px) {
  :root {
    --s-section: clamp(64px, 10vw, 80px);
    --s-route-section: clamp(56px, 10vw, 72px);
    --s-section-bridge: clamp(28px, 7vw, 36px);
    --gutter: 20px;
  }
}

/* Legacy token bridge (index/about use .np, case studies use .cs) */
.np, .cs {
  --paper: var(--c-bg);
  --paper2: var(--c-bg-2);
  --ink: var(--c-text);
  --mute: var(--c-text-2);
  --line: var(--c-line);
  --line-w: var(--c-line-2);
  --blue: var(--c-indigo);
  --blue2: var(--c-indigo-soft);
  background: var(--c-bg);
  color: var(--c-text);
}
html, body { background: var(--c-bg); }
a { color: inherit; }
a:hover { color: var(--c-indigo-soft); }
.np ::selection, .cs ::selection { background: var(--c-indigo); color: #fff; }
.blue { color: var(--c-indigo-soft); }
.skip { background: var(--c-text); color: var(--c-bg) !important; }
.skip:focus { color: var(--c-bg) !important; }

/* ---------- Navigation (index, about: .nav · case studies: .bar) ---------- */
.nav, .bar {
  background: rgba(11,11,13,.74);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--c-line);
}
.navlinks a { color: var(--c-text-2); transition: color var(--d-fast) var(--ease-out); }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--c-text); }
.navlinks a::after { height: 1px; bottom: 8px; background: var(--c-indigo-soft); }
.brand-link, .brand-link:hover, .cs .brand-link:hover { color: var(--c-text); }
.menu-btn { border: 1px solid var(--c-line-2); color: var(--c-text); background: transparent; }
.menu-btn:hover { border-color: var(--c-text); }
.mobile-menu { background: var(--c-bg); color: var(--c-text); border-top: 1px solid var(--c-line); }
.mobile-menu a { color: var(--c-text); border-bottom-color: var(--c-line); }
.mobile-menu a span { color: var(--c-indigo-soft); }
.mobile-menu a[aria-current="page"] { color: var(--c-indigo-soft); }

/* ---------- Buttons ---------- */
.btn { border-width: 1px; }
.btn-ink, .cs .btn-ink { background: var(--c-text); color: var(--c-bg); }
.btn-ink:hover, .cs .btn-ink:hover { background: var(--c-indigo-ui); color: #fff; }
.btn-blue, .cs .btn-blue { background: var(--c-indigo-ui); color: #fff; }
.btn-blue:hover, .cs .btn-blue:hover { background: var(--c-text); color: var(--c-bg); }
.btn-line, .cs .btn-line { border-color: var(--c-line-2); color: var(--c-text); background: transparent; }
.btn-line:hover, .cs .btn-line:hover { border-color: var(--c-text); background: var(--c-text); color: var(--c-bg); }
.btn:active { transform: scale(.98); }
.np a:focus-visible, .np button:focus-visible, .np input:focus-visible, .np select:focus-visible, .np textarea:focus-visible,
.cs a:focus-visible, .cs button:focus-visible, .cs [tabindex]:focus-visible { outline: 2px solid var(--c-indigo-soft); outline-offset: 3px; }

/* ---------- Footer ---------- */
.foot { background: var(--c-bg); color: var(--c-text-3); border-top: 1px solid var(--c-line); }
.foot a { color: var(--c-text-2); }
.foot a:hover { color: var(--c-text); }

/* ---------- Shared section furniture ---------- */
.sec-head { border-bottom: 1px solid var(--c-line-2) !important; }
.lede { color: var(--c-text-2); }
.flag { color: var(--c-indigo-soft); border-color: var(--c-line-accent); }