/* Sound Footings design tokens — the deployed copy for the public landing site.
 *
 * This file is fetched by both landing pages, so it is public and one click from
 * view-source. It therefore names no internal paths, for the same reason the
 * pages' own headers do not.
 *
 * THE AUTHORITY IS THE COMPANY DESIGN SYSTEM, held in the repo's brand
 * documentation and locked by decision 0009. These values are its palette,
 * spacing scale, radii and type transcribed into custom properties. If the two
 * ever disagree the design system wins and this file is what changes.
 * Developers: the landing-page working notes name the exact file.
 *
 * Why the tokens are duplicated here rather than linked from elsewhere in the
 * repo: only this directory is published, and that publish path is a privacy
 * guard rather than a build setting, so a stylesheet held outside it would 404
 * in production.
 *
 * Both landing pages link this file. They each used to carry their own inlined
 * token block and had already drifted apart in coverage — 27 on one page, 22 on
 * the other, 20 in common — which is the step before the values drift too.
 *
 * Only tokens belong in here. Component rules are page-local: the landing pages
 * use a small set of their own, and importing the product prototype's component
 * library would ship dead CSS to a public page.
 */

:root {
  /* --- Brand palette (design.md section 4) --- */
  --sf-ink:    #171a18;   /* Footing Black — primary text, decisive actions */
  --sf-paper:  #f3f0e8;   /* Drawing Paper — main background, document field */
  --sf-slate:  #3f5860;   /* Surveyor Slate — secondary text, diagrams */
  --sf-clay:   #b75b3a;   /* Site Clay — selected state, emphasis. Rationed. */
  --sf-timber: #b58b5b;   /* Timber — editorial warmth, secondary series */
  --sf-white:  #ffffff;

  --sf-surface:        #fffdf8;
  --sf-surface-raised: #ffffff;
  --sf-border:         #cbc8c0;
  --sf-border-strong:  #7d817d;

  /* Interface colours, not brand signature colours. */
  --sf-success: #356b4f;
  --sf-warning: #8a5b18;
  --sf-danger:  #a33d32;
  --sf-focus:   #2d6f9f;

  /* Tints. Site Clay is 4.03:1 on paper, so never body text — only fills,
   * marks and states that also carry a label. */
  --sf-clay-wash:  rgb(183 91 58 / 12%);
  --sf-slate-wash: rgb(63 88 96 / 8%);
  --sf-ink-wash:   rgb(23 26 24 / 5%);

  /* --- Shape (section 6) --- square, or nearly. 8px is the ceiling. */
  --sf-radius-sm: 2px;
  --sf-radius-md: 4px;
  --sf-radius-lg: 8px;
  --sf-shadow-raised: 0 8px 24px rgb(23 26 24 / 10%);

  /* --- Spacing --- 4px base, 8px working rhythm --- */
  --sf-1: 4px;  --sf-2: 8px;  --sf-3: 12px; --sf-4: 16px;
  --sf-5: 24px; --sf-6: 32px; --sf-7: 48px; --sf-8: 64px; --sf-9: 96px;

  /* --- Type (section 5) --- */
  --sf-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sf-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --sf-display:   48px/52px;
  --sf-title:     32px/38px;
  --sf-section:   24px/30px;
  --sf-component: 20px/26px;
  --sf-body:      16px/24px;
  --sf-ui:        14px/20px;
  --sf-label:     12px/16px;

  /* --- Motion (section 9) --- confirms cause and effect, nothing more --- */
  --sf-dur: 150ms;
  --sf-dur-panel: 240ms;
  --sf-ease: ease;
}