/* ═══════════════════════════════════════════════════════════════════════════
   sinsosu tokens + theme-layer reset  ·  1.9.94  ·  2026-08-15 (Eric: "Fix the
   theme layer. It should stand up and out.")

   WHY THIS FILE EXISTS
   The twentytwentyfive-child theme ships
       body, h1..h6, p, input, button, div { font-family: Ysabeau; }
   plus WP global-styles `body { font-weight:300; font-size:clamp(...) }` and a
   #DFDCD7 ground with #333 text. A direct element match on `div` beats the
   plugin's *inherited* font stack — inheritance always loses to a declaration.
   Measured on staging 2026-08-15: every plugin surface computed to Ysabeau 300
   on #DFDCD7. That is the "thin, small, grey" the whole redesign is about.

   The theme file lives on the server, not in this repo, so it is not editable
   from here and would be lost on a theme update anyway. Instead this sheet is
   enqueued at wp_head priority 99 — AFTER theme and global styles — and takes
   the type and ground back for sinsosu surfaces only.

   TOKENS are not invented. They are the set already served on /checker/, the
   money surface, verified over HTTP 2026-08-15. One addition: --ss-blue, the
   house 764-triad blue from technicity.my (PALETTE-TOKEN-REPORT-2026-08-08 §1).

   EVERY custom property here is --ss- prefixed ON PURPOSE. homepage.css and
   dashboard.css already own bare --gold / --serif / --sans / --mono / --ink /
   --paper / --indigo at :root. This sheet loads last, so unprefixed names would
   silently repaint both of them — e.g. --gold #FFD700 → #c9a227 would restyle
   every existing button on the site as a side effect. Do not drop the prefix.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ground + ink — verified live on /checker/ 2026-08-15 */
  --ss-paper:#faf7f0;      /* warm off-white ground */
  --ss-card:#ffffff;
  --ss-ink:#16114a;        /* indigo-black, body + headings */
  --ss-ink2:#3a3468;       /* secondary */
  --ss-ink3:#6b668c;       /* muted meta — never lighter than this on paper */
  --ss-line:#ddd6c6;       /* hairline */

  /* the 764 triad — indigo · blue · yellow */
  --ss-indigo:#1c1464;
  --ss-blue:#009bdf;       /* house blue, technicity.my --blue */
  --ss-blue-pale:#d6eefb;
  --ss-gold:#c9a227;
  --ss-goldd:#8a6d1f;      /* gold darkened for text on paper */
  --ss-red:#b03a2e;

  /* type */
  --ss-sans:"Noto Sans JP",sans-serif;
  --ss-serif:"Zen Old Mincho","Noto Serif JP",serif;
  --ss-mono:"JetBrains Mono",monospace;

  /* scale — house floor is 16px for meta, 20px for body. Nothing below 14px. */
  --ss-t-body:20px;
  --ss-t-meta:16px;
}

/* ── Take the type back from the theme ───────────────────────────────────────
   Same element-level specificity the child theme uses, but loaded later, so
   these win on cascade order rather than on !important. Kept to the elements
   the theme actually names — nothing broader. */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body div, body span, body li, body a,
body input, body button, body select, body textarea{
  font-family:var(--ss-sans);
}
/* Anything that already declares its own family keeps it — these restore the
   two the theme's `div` rule was stealing. */
body .ssx .fname, body .ssx .fcolors, body .ssx-h2,
body .hp-hero h1, body .hp-sec h2, body .hp-block h2, body .ss-sec-h{
  font-family:var(--ss-serif);
}
body .ssx .fcode, body .mono, body .ss-code{
  font-family:var(--ss-mono);
}

body{
  background:var(--ss-paper);
  color:var(--ss-ink);
  font-size:var(--ss-t-body);
  font-weight:400;          /* was 300 — the "thin" */
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

/* The theme's blanket `color:#333` kills every inherited colour, which is why
   the book covers needed their colours restated inline. Headings take the ink
   token; anything that sets its own colour still wins on specificity. */
body h1, body h2, body h3, body h4, body h5, body h6{
  color:var(--ss-ink);
  font-weight:700;
  line-height:1.35;
}

/* ── Floors. House rule: body 20px, meta 16px, nothing human-facing below 14px.
   These lift the measured offenders without restyling their components. */
body .ssx-hint, body .ssx .fprof, body .ssx .fmeta,
body .ssx .nowsent, body .ssx .phchip,
body .ssx .step, body .ssx .ev, body .ssx .ball .cn, body .ssx .dcnote,
body .hp-hero p, body .ss-calc-hint, body .ss-topnav-link, body .ss-topnav-logo{
  font-size:var(--ss-t-meta);
}
body .ssx .evtag, body .ssx .vlab, body .ssx .ev .c, body .ssx .nowline{
  font-size:14px;   /* absolute floor — badges and axis labels only */
}

/* Muted text stops at --ss-ink3. The old 50%-opacity-on-14px greys failed
   contrast twice over: too small and too faint. */
body .hp-hero p, body .ss-calc-hint, body .ssx-hint, body .ssx-lead{
  color:var(--ss-ink3);
  opacity:1;
}

/* ── Calculator, fluid glass (Eric 2026-08-15: "Glass it") ───────────────────
   .ss-calc-card is declared inline TWICE inside class-ss-calculator.php — the
   hero copy and a second one further down. Styling it here, once, from a sheet
   that loads after both, keeps them from drifting apart. Same four-layer edge
   as the play-card so the two objects belong to one material world.
   The blur is desktop-only for the same reason as the card: this is the money
   path, and it must be the least clever element on the page on a phone. */
body .hp-hero .hp-calc-hold{position:relative;}
body .hp-hero .hp-calc-hold::before{
  content:"";position:absolute;inset:-14% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 48% at 26% 28%, rgba(56,56,184,.17), transparent 70%),
    radial-gradient(38% 44% at 76% 34%, rgba(232,200,32,.20), transparent 70%),
    radial-gradient(40% 46% at 58% 80%, rgba(40,104,216,.15), transparent 70%);
  filter:blur(30px);
}
body .ss-calc-card{
  position:relative;z-index:1;
  background:
    linear-gradient(157deg, rgba(255,255,255,.94) 0%, rgba(255,253,248,.78) 48%, rgba(244,240,231,.86) 100%),
    #fff;
  border:1px solid rgba(255,255,255,.8);
  border-radius:22px;
  box-shadow:
    0 28px 60px -14px rgba(22,17,74,.26),
    0 8px 20px -8px rgba(22,17,74,.16),
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1.5px 0 rgba(28,20,100,.12),
    inset 0 0 0 1px rgba(28,20,100,.06);
}
@media (hover:hover) and (pointer:fine){
  body .ss-calc-card{backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);}
}

/* ── Mobile: headlines never drop below the 36px floor ──────────────────────── */
@media(max-width:640px){
  body .hp-hero h1{font-size:clamp(36px,9vw,44px);}
}