/* ============================================================================
   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:960px;       /* NEW — marketing-site landing canvas (phase c)   */

  /* ---- 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}

*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font-text)}header{max-width:1240px;margin:auto;padding:30px 42px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{color:var(--text);text-decoration:none;font-size:25px;letter-spacing:-1px;font-weight:650;white-space:nowrap}.seam{font-weight:300;color:var(--accent);padding:0 5px}.version{font:11px var(--font-mono);letter-spacing:1px;margin-left:12px;border:1px solid var(--line-2);padding:4px 7px;border-radius:5px}.environment{margin-left:auto;color:var(--muted);font-size:12px;letter-spacing:.4px}main{max-width:1160px;padding:70px 40px 40px;margin:auto}.eyebrow{text-transform:uppercase;letter-spacing:2px;color:var(--muted);font-size:11px;font-weight:650;margin-bottom:14px}h1{font:550 clamp(34px,5vw,62px)/1.1 var(--font-display);letter-spacing:-2px;margin:0 0 22px}h2{font:550 22px/1.3 var(--font-display);letter-spacing:-.5px;margin:0 0 15px}h3{font-size:18px;font-weight:550}.lede{font-size:18px;line-height:1.6;max-width:650px;color:var(--muted)}.login-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:40px;align-items:start}form{background:var(--surface);border:1px solid var(--line);padding:30px;border-radius:var(--r)}form p{font-size:14px;color:var(--muted)}label{display:block;font-size:13px;margin:18px 0 7px}input{width:100%;padding:12px 14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;color:var(--text);font:inherit}input:focus{outline:2px solid var(--accent);outline-offset:2px}button{font:550 14px var(--font-text);cursor:pointer;border:1px solid transparent;border-radius:8px;padding:13px 18px;background:var(--accent);color:white}button:focus-visible,a:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}form button{width:100%;margin-top:24px}.quiet{background:transparent;border-color:var(--line-2);font-size:12px;padding:9px 13px}.notice{border-top:1px solid var(--line-2);margin-top:26px;padding-top:20px;color:var(--muted);font-size:14px}.notice strong{color:var(--text);font-weight:550}.notice p{margin:8px 0}li{padding:5px 0;color:var(--muted)}ul{padding-left:19px}.workspace-top{display:flex;gap:20px;justify-content:space-between;align-items:start}.workspace-top h1{font-size:42px}.pill{white-space:nowrap;border:1px solid var(--line-2);border-radius:99px;padding:6px 12px;font-size:12px;color:var(--muted)}nav{display:flex;gap:12px;margin:25px 0 35px}nav a{color:var(--muted);padding:8px 14px;border-radius:7px;text-decoration:none;font-size:14px}nav a[aria-current=page]{background:var(--surface-2);color:var(--text)}.workspace-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:35px}.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:25px 0 15px;gap:12px}.section-head:first-child{margin-top:0}.section-head h2{margin:0;font-size:19px}.muted{color:var(--muted);font-size:12px}.row{display:block;text-align:left;width:100%;background:var(--surface);border:1px solid var(--line);margin:10px 0;padding:18px 20px;border-radius:12px;color:var(--text)}.row:hover{border-color:var(--line-2);background:var(--surface-2)}.row strong{display:block;font-size:16px;font-weight:550}.row span{display:block;color:var(--muted);font-size:12px;margin-top:8px}.row[aria-pressed=true]{border-color:var(--accent)}#detail{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:28px;align-self:start;min-height:290px;overflow-wrap:anywhere}#detail p{color:var(--muted);font-size:15px}#detail h3{font-size:14px;margin-top:25px}#detail li{font-size:14px}#detail dl{display:grid;grid-template-columns:100px 1fr;font-size:13px;gap:12px}dt{color:var(--muted)}dd{margin:0}.bottom{margin-top:40px}footer{padding:35px 25px;text-align:center;color:var(--faint);font-size:12px;letter-spacing:.4px}#login-error,#app-error{color:#ffb4a8}button,nav a{transition:background .15s,border-color .15s}[hidden]{display:none!important}@media(max-width:720px){header{padding:22px;flex-wrap:wrap;gap:12px}.environment{order:3;flex-basis:100%;margin:0}#logout{margin-left:auto}main{padding:42px 22px}.login-layout,.workspace-grid{grid-template-columns:1fr;gap:25px}h1{letter-spacing:-1px}.workspace-top{display:block}.workspace-top h1{font-size:34px}.pill{display:inline-block;margin-top:5px}.section-head{flex-wrap:wrap}form{padding:23px}footer{line-height:2}}