/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — the one place Autumn's decisions live.

   WHY THIS FILE EXISTS, and it is not tidiness.

   There were eleven separate `:root` blocks across the site and the app, and
   `autumn.css` — the MARKETING page's stylesheet, complete with bare `nav`,
   `section`, `body` and `footer` rules — was being loaded by the product. Two
   bugs shipped from that in one day:

     · `nav{position:fixed;top:0;left:0;right:0}` is the marketing site's
       floating header. It matched the app's own <nav>, tore it out of its bar,
       spanned it 1,392px across the window and printed the tabs over the
       wordmark.
     · `section{padding:clamp(72px,11vw,160px) 0}` is the marketing page's
       vertical rhythm. It pushed a heading 154px down its own column.

   Neither was visible in the app's source. Both were invisible until rendered.

   THE RULE THIS FILE ENFORCES: a shared stylesheet may declare tokens and
   nothing else. No element selectors, no layout, no components. Anything can
   load this safely, forever, because there is nothing here to collide with.
   A test fails the build if a selector appears in it.

   Components that really are shared live in components.css. Marketing layout
   stays in autumn.css, which now only the marketing page loads.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── SURFACES ────────────────────────────────────────────────────────────
     Four, in depth order. More than four and nobody can remember which is
     which, which is how you end up with eighty-nine colours. */
  --tint:   #F6F7EB;   /* the ground everything sits on */
  --panel:  #FFFFFF;   /* a raised surface — panels, cards, sheets */
  --cloud:  #F2F4F3;   /* a recessed surface — hover, inset, wells */
  --mist:   #E0E2DB;   /* every border and divider */

  /* ── INK ─────────────────────────────────────────────────────────────────
     Three weights of text and nothing between them. */
  --ink:    #191716;   /* what you read */
  --slate:  #393E41;   /* what you read second */
  --faint:  #7C807F;   /* labels, stamps, provenance */

  /* ── THE SEMANTIC FOUR ───────────────────────────────────────────────────
     These never change meaning, on the marketing site or in the product. A
     visitor who learns them on the landing page can read the app. Using any of
     them decoratively breaks that, which is why the data ramp below exists
     separately. */
  --action:   #E94F37;   /* needs you */
  --discover: #FFC15E;   /* found, not yet read */
  --info:     #016F89;   /* being read */
  --verified: #709255;   /* verified */
  --intel:    #E6AF2E;   /* Autumn's own voice — never a data state */

  --accent: var(--action);   /* the signature; a product may repoint it */

  /* ── DATA COLOURS ────────────────────────────────────────────────────────
     For categorical encoding — industries, segments, communities — where the
     colour means "a different one", not "a state". Kept apart from the
     semantic four on purpose: the moment an industry is drawn in --verified,
     green stops meaning verified anywhere. */
  --d1:#3D348B; --d2:#5C415D; --d3:#CC5803; --d4:#83751B; --d5:#3E5622;
  --d6:#95846A; --d7:#49111C; --d8:#A99270; --d9:#353531; --d10:#B0704A;

  /* ── TYPE ────────────────────────────────────────────────────────────────
     Three roles. Mono is not decoration: anything counted, measured or dated
     is set in it, so a reader can tell a claim from a reading at a glance
     without being taught. */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  /* Roboto is in the chain for Android, where neither Inter nor Segoe UI is
     present. Dropped by accident when the stacks were merged; only visible on
     a device none of us test on, which is exactly why it is worth keeping. */
  --sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* A scale, so a size is chosen rather than typed. Fluid where it earns it. */
  --t-micro: .66rem;                       /* uppercase mono labels */
  --t-small: .82rem;
  --t-body:  1rem;
  --t-lead:  clamp(1.06rem, 1.7vw, 1.32rem);
  --t-h3:    clamp(1.02rem, 2vw, 1.18rem);
  --t-h2:    clamp(1.6rem, 3.4vw, 2.35rem);
  --t-h1:    clamp(2.3rem, 6vw, 4.1rem);
  --track-caps: .12em;                     /* letter-spacing for small caps */

  /* ── SPACE ───────────────────────────────────────────────────────────────
     A ratio scale. Spacing that is picked off a scale reads as considered;
     spacing typed per element reads as approximate, because it is. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 22px; --s6: 30px; --s7: 44px; --s8: 64px; --s9: 96px;
  --gut: clamp(20px, 4vw, 64px);           /* page gutter */
  --max: 1240px;                           /* marketing measure */
  --max-app: 1180px;                       /* product measure */
  --measure: 66ch;                         /* readable line length */

  /* ── RADIUS ──────────────────────────────────────────────────────────────
     Autumn is square. 2px is a manufacturing tolerance, not a style; the
     rounded-card look is the generic SaaS default we are explicitly not. */
  --r-sharp: 0;
  --r:       2px;
  --r-pill:  999px;

  /* ── ELEVATION ───────────────────────────────────────────────────────────
     Depth by shadow is used sparingly — a border does most of the work here.
     Reserved for things that genuinely float above the page. */
  --e0: none;
  --e1: 0 1px 2px -1px rgba(25,23,22,.10);
  --e2: 0 8px 24px -12px rgba(25,23,22,.22);
  --e3: 0 24px 70px -30px rgba(25,23,22,.50);   /* modals, the Ask sheet */

  /* ── MOTION ──────────────────────────────────────────────────────────────
     THERE WERE TWELVE DURATIONS AND NO SYSTEM. Measured across the app:
     .12s .15s .16s .18s .2s .22s .3s .35s .4s .5s .55s .6s .7s .8s .85s .9s 1s
     — including .16s and .18s as separate values, a difference no human can
     perceive, which is proof that neither was chosen.

     Six durations. If a motion does not fit one, the motion is wrong. */
  --m-instant:   0ms;      /* state that must not appear to travel */
  --m-micro:   120ms;      /* hover, press, focus */
  --m-fast:    200ms;      /* tooltips, chips, small reveals */
  --m-standard:320ms;      /* panels, drawers, list changes */
  --m-slow:    480ms;      /* view changes, shared elements */
  --m-cinema:  900ms;      /* once per screen, at most */

  /* Three curves, each with a job.
     out    things arriving, decelerating into place — the default
     inout  things moving between two on-screen positions
     exit   things leaving, accelerating away  */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-exit:  cubic-bezier(.4, 0, 1, 1);

  /* Springs, for anything that overlaps or settles against something else —
     an easing curve cannot express two entities arriving in the same place.
     Consumed by market-life.js, not by CSS. */
  --spring-stiffness: .055;
  --spring-friction:  .86;

  /* ── LAYERS ──────────────────────────────────────────────────────────────
     Named, so a z-index is a decision rather than a bigger number than the
     last one somebody typed. */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  50;
  --z-overlay: 200;
  --z-toast:   300;

  /* ── BREAKPOINTS ─────────────────────────────────────────────────────────
     Recorded here for one source of truth, though CSS cannot yet use custom
     properties inside a media query. Written as comments deliberately: a token
     that looks usable but silently does nothing is worse than a note.
       phone   < 680px    the map is a desktop instrument and steps aside
       tablet  ≥ 680px
       laptop  ≥ 920px    the map and the place list sit side by side
       desk    ≥ 1180px */
}

/* ── THE PAPER SKIN ──────────────────────────────────────────────────────────
   THE SECOND VISUAL LANGUAGE, brought into one file rather than unified away.

   index.html, hq.html, in.html and onboard.html run a warmer, rounder palette:
   ground #FBF8F3 against Autumn's #F6F7EB, ink #2B2721 against #191716, and a
   16px radius where Autumn is square. It predates the Autumn system and it is
   not drift — it is a different design, with its own greens and coppers.

   Whether the two should become one is a DESIGN decision, not a cleanup. The
   difference is most of the character of the marketing front door and the whole
   application shell, and quietly repainting them while claiming to tidy tokens
   would be making that decision without saying so.

   So: both live here, named, and the divergence is visible in one place instead
   of being scattered across four files that could drift apart further. Deleting
   this block and letting these pages fall through to the Autumn tokens above is
   now a one-line change — which is what makes the decision cheap to take when
   somebody wants to take it.

   Applied with <html data-skin="paper">. */
:root[data-skin="paper"] {
  --tint:    #FBF8F3;   /* --paper */
  --panel:   #FFFDFA;   /* --surface */
  --cloud:   #F1EBE1;   /* --sand */
  --mist:    #E4DCCF;   /* --edge */
  --ink:     #2B2721;
  --slate:   #5E5750;   /* --ink-soft */
  --faint:   #9A9188;   /* --stone */

  /* Its own accents. Deliberately NOT mapped onto the semantic four: this
     palette's green is a brand green, not "verified", and pretending otherwise
     would give the same colour two meanings across the product. */
  --forest:#2F5D50; --olive:#77874F; --burnt:#BE5A1E; --amber:#E0A458;
  --copper:#B0704A; --rust:#9C3D26;  --gold:#B98E1E;  --bark:#6B5344;

  /* The names the four pages already use, pointed at the canonical tokens so
     nothing has to be renamed inside 4,600 lines of live markup. */
  --paper: var(--tint);
  --surface: var(--panel);
  --sand: var(--cloud);
  --edge: var(--mist);
  --ink-soft: var(--slate);
  --stone: var(--faint);

  --r: 16px;            /* this skin is round; Autumn is square */
  --shadow: 18px 30px 60px -34px rgba(74,54,34,.42);
  --shadow-sm: 0 2px 6px -2px rgba(74,54,34,.16);
  --serif: 'Instrument Serif','Iowan Old Style',Georgia,'Times New Roman',serif;
}

/* ── THERE IS NO DARK THEME HERE, AND THAT IS THE DECISION ───────────────────
   I added one during this extraction. Nobody asked for it, Autumn is a warm
   light design, and it did not survive being rendered. Removed, with the
   evidence, because "we tried it and here is what broke" is the only note that
   stops somebody adding it back the same way.

   WHAT IT DID. A `@media (prefers-color-scheme: dark)` block here reaches every
   page that loads this file — including pages that pin some of their own
   surfaces. autumn.html sets --tint, --panel, --cloud and --mist in a style
   attribute on <html>, which is how each room of the marketing site gets its
   own ground. An inline style beats a stylesheet, so the ground stayed cream
   and only --ink flipped:

     landing page, machine set to dark   #F1F1EC on #F6F7EB   1.76:1
     Autumn Find,  machine set to dark   the entire product went black

   1.76:1 is not a dark theme, it is ghost text. The headline, the wordmark, the
   researched-businesses count and the secondary button were all still there and
   all but invisible — which reads as a deliberate blur, not as a fault. It was
   reported as "the effect you put on the text makes it look smudged, it made me
   think I needed glasses". Two symptoms, one cause, and neither was visible in
   the source of any page.

   THE GENERAL LESSON, worth more than the fix: a token override in a shared
   sheet lands on pages that override SOME of the same tokens locally, and the
   result is a half-applied theme. Half a theme is worse than none, because the
   pairs that carry contrast get split up.

   IF A DARK THEME IS EVER WANTED it is a design job, not a token block: every
   page that pins a surface inline has to pin its ink with it, the semantic four
   have to be re-picked against a dark ground, and it has to be checked by
   rendering rather than by reading. scripts/design_contrast_check.js is the
   check it would have to pass.

   The one dark surface Autumn already has is deliberate and unaffected: the
   Platform section of the marketing page opts in with `body.dark`, sets both
   its ground and its ink, and is designed as a dark section rather than
   inherited as a mode. */

/* ── REDUCED MOTION ──────────────────────────────────────────────────────────
   Set at the token layer so it reaches every page that loads this file,
   including the nine that had no reduced-motion rule of their own. A page can
   still do something better for its own animations; this is the floor, and a
   floor that applies everywhere beats a good rule applied in six places.

   Durations collapse rather than animations being removed: every reveal still
   happens, it simply happens at once. Part 36 §E — Autumn does not ship a
   broken mode for anybody. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-micro: 1ms; --m-fast: 1ms; --m-standard: 1ms;
    --m-slow: 1ms;  --m-cinema: 1ms;
  }
}