/* ─── appcomm — WEBSITE design tokens ────────────────────────────────────────
   The single token source for appcomm.co. Created 1 Aug 2026, launch plan
   step 8.

   Before this, seven pages each carried their own copy of the token block and
   they had already drifted: --maxw was 1180 on the home page and 1100 on the
   rest, perks.html and contact.html were missing --primary-bg, contact.html had
   no amber ramp, --fm meant JetBrains Mono on one page and system mono on
   another, and privacy.html and terms.html referenced --maxw without ever
   defining it, so their outer wrap had no ceiling at all.

   This file is the website half of BRAND.md v2. The app's copy lives in the
   single :root at APP/src/index.css:8. The two must agree: a token change is a
   two-repo change until they share a build, which they do not.

   NEVER add a :root to a page. Add it here.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Typography ─────────────────────────────────────────────────────────
     Three faces, two registers. Prose is --fh for headings and --fb for body.
     Anything the system generated, a label, a count, a price, a status, is
     --fm and uppercase. See BRAND.md section 2. */
  --fh: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --fb: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ── Colour ─────────────────────────────────────────────────────────────
     Warm greys only, never cold. */
  --primary:    #3457D5;
  --primary-dk: #2840A6;
  --primary-lt: #ECEFFB;
  --primary-bg: #EEF1FC;
  --primary-bd: #C9D4F4;

  --accent:     #0E867A;
  --accent-dk:  #0A6A60;
  --accent-lt:  #E4F3F1;

  --ink: #20242E;
  --t1:  #20242E;
  --t2:  #4C4F57;
  --t3:  #85857E;

  /* --stone is the canvas, --s1 the secondary surface. Corrected from
     #F6F5F1 to match what the app has actually rendered since session 14. */
  --white: #FFFFFF;
  --stone: #FAFAF8;
  --s1:    #F6F5F1;
  --s2:    #EFEDE7;
  --s3:    #E3E0D8;
  --s4:    #D3CFC4;

  --green:    #15875E;
  --green-bg: #E8F4EE;
  --green-bd: #BEE0CE;
  --amber:    #C07C12;
  --amber-bg: #FAF0D9;
  --amber-bd: #EFD9A8;
  /* --red was referenced by partners.html behind a hex fallback and defined
     nowhere. It is a real token now. */
  --red:      #CF4329;
  --red-dk:   #B23A22;
  --red-bg:   #FBEBE6;
  --red-bd:   #F2C7BB;

  --indigo:    #5B5BD6;
  --indigo-bg: #EFEAFB;
  --rose:      #C0556B;
  --rose-bg:   #FBEEF0;
  --rose-bd:   #EFD3D9;

  --brand-discord:  #5865F2;
  --brand-linkedin: #0A66C2;

  /* ── Radius ─────────────────────────────────────────────────────────────
     The website scale is the one BRAND.md v2 adopted for both codebases. */
  --r-sm:    6px;
  --r:      10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-pill: 999px;
  --radius: 10px;   /* deprecated alias, kept for partner-preview.html */

  /* ── Elevation ──────────────────────────────────────────────────────────
     Cards rest flat on a bordered white surface. Shadow is for lift. */
  --e0: none;
  --e1: 0 4px 12px rgba(32,36,46,.05);
  --e2: 0 2px 8px rgba(32,36,46,.06), 0 16px 40px -8px rgba(32,36,46,.12);
  --e3: 0 4px 12px rgba(32,36,46,.08), 0 32px 64px -16px rgba(32,36,46,.20);

  /* Legacy names still referenced by the marketing pages. */
  --shadow-card:  0 1px 2px rgba(32,36,46,.04), 0 8px 30px rgba(32,36,46,.06);
  --shadow-hi:    0 2px 6px rgba(32,36,46,.06), 0 24px 60px rgba(32,36,46,.12);
  --shadow-color: 0 18px 40px -12px rgba(52,87,213,.45);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
  --ease:    cubic-bezier(.2,.7,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);

  /* ── Spacing and layout ─────────────────────────────────────────────────
     --maxw was 1180 on the home page and 1100 everywhere else, and undefined
     on privacy and terms, where .wrap sets max-width from it. One value. */
  --stack-xs:  4px;
  --stack-sm:  8px;
  --stack-md: 16px;
  --stack-lg: 32px;
  --stack-xl: 56px;
  --gutter: 24px;
  --nav-h: 64px;
  /* One value, matching --container-max in the app. index.html was already
     1180; partners, perks, developers and contact were 1100 and widen by 80px.
     privacy and terms referenced --maxw without defining it, so their outer
     wrap had no ceiling at all. Their body text was never affected: .doc-body
     caps itself at 720px. */
  --maxw: 1180px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────────
   The marketing pages animate more than the app does: floating perk cards, a
   pulsing hero, scroll reveals. None of it had an escape hatch. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Section labels ──────────────────────────────────────────────────────────
   The site calls these .eyebrow and the app calls them .kick, and both used to
   paint every one of them --accent regardless of what the section was. Same fix
   as step 1: the colour carries the intent. Editorial means we chose it,
   community means the members did, neutral means nobody did.

   Defined here rather than per page, because five pages each carried a byte
   identical copy of the base rule. Context overrides that put an eyebrow on a
   dark band, .builder .eyebrow and .cta-band .eyebrow, are two classes deep and
   still win. */
.eyebrow,
.section-label {
  display: inline-block;
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}
.eyebrow--editorial, .section-label--editorial { color: var(--primary); }
.eyebrow--community, .section-label--community { color: var(--accent); }
.eyebrow--neutral,   .section-label--neutral   { color: var(--t3); }

/* ── Keyboard focus ──────────────────────────────────────────────────────────
   The site had no focus styling at all, so tabbing through the nav and the
   lead form showed only the browser default, and nothing at all where an
   outline had been removed. */
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}