/* ============================================================================
   STRANGEPAIR CANONICAL TOKENS  —  single source (DIR-036, phase b)
   ----------------------------------------------------------------------------
   ONE token set for every surface: hub, builder, WR room, and the marketing
   site. Ratified from the two systems the DIR-035 extract found (deck.css +
   board.css) into a single canon — deck supplies the values (the richer,
   complete system: full type stack, accent scale, gradient ground); board
   supplies the RESTRAINT (calm doctrine: neutral carries information, the
   accent is reserved for action + warning, never decoration).

   Where the two disagreed, the source of each reconciled primitive is noted
   inline so the choice is legible, not silent.
   ========================================================================== */

:root{
  /* ---- ground + surfaces  (source: deck — near-black ground) ------------- */
  --bg:#050506;            /* deck --bg      : the canonical ground           */
  --bg-2:#0d0d0f;          /* deck --bg-2    : top of the radial ground       */
  --surface:#151517;       /* deck --surface : card / raised panel            */
  --surface-2:#1d1d20;     /* deck --surface-2                                */
  --line:#2a2a2e;          /* deck --line    : hairline                       */
  --line-2:#3b3b42;        /* deck --line-2  : stronger edge                  */

  /* ---- ink  (source: deck) ---------------------------------------------- */
  --text:#f6f6f8;          /* primary ink — carries information               */
  --muted:#a4a4ad;         /* secondary ink                                   */
  --faint:#6c6c75;         /* tertiary ink / the "human/quiet" end of the seam*/

  /* ---- accent  (INHERITED blue — no new accent, DIR-036 §A) -------------- */
  --accent:#3b82f6;        /* deck --blue    : the ONE restrained accent      */
  --accent-2:#60a5fa;      /* deck --blue-2  : hover / lighter                */
  --accent-deep:#1d4ed8;   /* deck --blue-deep                                */
  --accent-soft:rgba(96,165,250,.10);

  /* ---- FUNCTIONAL signals only (calm doctrine — never decoration) -------- */
  --warn:#ffd60a;          /* deck --yellow  : WARNING state only             */
  --warn-soft:rgba(255,214,10,.12);
  --ok:#28c840;            /* deck --green   : SUCCESS / action only          */
  --ok-soft:rgba(40,200,64,.14);

  --glow:rgba(59,130,246,.35);
  --shadow:0 24px 60px -20px rgba(0,0,0,.8);

  /* ---- type  (RATIFIED — do not replace, DIR-036 §A) --------------------- */
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif; /* h1–h3      */
  --font-text:"Inter",-apple-system,system-ui,sans-serif;      /* body        */
  --font-mono:"JetBrains Mono",ui-monospace,monospace;         /* data/mono   */

  /* type scale — MOBILE-FIRST, FLUID (DIR-037 §A correction) ---------------
     The primary audience reads on a phone, so mobile is the FLOOR of every
     clamp(), never the afterthought: the min term is the phone size, the max is
     the 960 desktop canvas, and it only scales UP. Base body is now ~18.9px on
     a phone (was a flat 16px, which read small); the hero genuinely fills a
     phone screen (48px floor → 84px desktop). Small/fine sizes were raised off
     their old sub-legible values (.86/.66rem) to a mobile floor.
     Prior flat scale kept as comments for the record. */
  --fs-hero:clamp(3rem,8.5vw,5.25rem);          /* was clamp(2.2,7vw,3.6): 48→84 */
  --fs-h1:clamp(2.1rem,6vw,3rem);               /* was 2rem flat                 */
  --fs-h2:clamp(1.6rem,4.5vw,2.1rem);           /* was 1.4rem flat               */
  --fs-h3:clamp(1.3rem,3vw,1.55rem);            /* was 1.12rem flat              */
  --fs-lede:clamp(1.3rem,1.05rem + 1.1vw,1.6rem);/* NEW — hero/section sub-copy  */
  --fs-body:clamp(1.18rem,1.02rem + 0.7vw,1.3rem);/* was 1rem flat: 18.9→20.8    */
  --fs-sm:clamp(.95rem,.9rem + .2vw,1.02rem);   /* was .86rem flat — mobile floor*/
  --fs-xs:clamp(.8rem,.78rem + .1vw,.84rem);    /* was .66rem flat — mobile floor*/
  --lh-tight:1.06; --lh-body:1.55;

  /* ---- radius  (reconciled: board's family — calmer, tighter) ------------ */
  --r-sm:11px;             /* board bhead tab / button (11–12)                */
  --r:16px;                /* board card radius — the canonical default       */
  --r-lg:20px;             /* deck chip — for large feature panels            */
  --r-pill:999px;

  /* ---- spacing rhythm  (4px base — reconciles deck 15 / board 18) -------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:40px;

  /* ---- reading widths --------------------------------------------------- */
  --wrap:560px;            /* board source — mobile-first builder column      */
  --wrap-wide:1240px;      /* marketing-site canvas — WIDE frame (DIR-043): desktop breathes
                              with fluid gutters instead of a padded 960 box. Consumed ONLY by
                              the marketing site (site.css) + /styleguide; hub/builder/board/room
                              each define their own local .wrap, so they are untouched by this. */

  /* ---- THE SEAM  (DIR-036 §C — the human|machine device as a token) ------
     Left→right progression axis: human/present (quiet, --faint) → machine/
     leverage (the accent). Every surface divides sections with this one rule
     so the brand's single bold device lives at the system level. */
  --seam:linear-gradient(90deg,
      color-mix(in srgb,var(--faint) 70%,transparent) 0%,
      var(--line-2) 46%,
      var(--accent) 100%);
  --seam-v:linear-gradient(180deg,
      color-mix(in srgb,var(--faint) 70%,transparent) 0%,
      var(--line-2) 46%,
      var(--accent) 100%);
}

/* light theme — ratified from deck's light values (marketing/print surfaces) */
html[data-theme="light"]{
  --bg:#f3f4f7; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f4f5f8;
  --line:#e4e6ec; --line-2:#d3d6df;
  --text:#14151a; --muted:#565a66; --faint:#8b8f9c;
  --accent:#2563eb; --accent-2:#1d4ed8; --accent-deep:#1e40af;
  --accent-soft:rgba(37,99,235,.07);
  --warn:#c98f00; --warn-soft:rgba(201,143,0,.12);
  --ok:#1a9e37; --ok-soft:rgba(26,158,55,.12);
  --glow:rgba(37,99,235,.18); --shadow:0 20px 50px -24px rgba(20,40,90,.22);
}

/* ---- the seam, as reusable divider primitives ---------------------------- */
.sp-seam{border:0;height:1px;margin:var(--sp-5) 0;background:var(--seam);opacity:.9}
.sp-seam-v{width:1px;align-self:stretch;background:var(--seam-v);opacity:.9}
/* section rule with a load-bearing center notch (the shared mark's seam echo) */
.sp-rule{position:relative;border:0;height:1px;margin:var(--sp-5) 0;background:var(--line)}
.sp-rule::after{content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px;
  transform:translateX(-50%) rotate(45deg);background:var(--accent);border-radius:1px}