/* ============================================================================ * skin-base.css — CandleAI classic SKIN TOKEN CONTRACT (Skin Engine) * ---------------------------------------------------------------------------- * Skin-AGNOSTIC layer. Declares the design-token vocabulary with SAFE DEFAULTS * (approximating classic's stock look). The generated per-build `skin.css` sets * the token VALUES and — crucially — emits the CONSUMER rules (body/heading font, * component radii, card shadow, info-box variant backgrounds) SCOPED under a * DOUBLED class `html..`. * * ⚠️ CASCADE (verified in a real browser): the theme.css bundle is ed AFTER * skin-base.css AND after skin.css. So an UNSCOPED rule here (equal specificity to * theme.css) would LOSE by source order — that is why the consumers live in skin.css * with a doubled-class selector (specificity 0,2,1+ beats theme.css 0,1,1/0,1,0 * regardless of order), NOT here as bare selectors. This file only keeps rules that * do NOT collide with theme.css: token defaults (`:root`, no competitor), the * skin-layout structural axis (`html.skin-layout-*`, no competitor), and the nav * overflow guard. * * theme.css is NEVER edited (byte-identical). When the skin engine is OFF this file * is not linked at all (classic output unchanged). * ==========================================================================*/ :root { /* Typography (revives ThemePreset.typography.*) — consumed by skin.css scoped rules */ /* I18N-CJK: CJK families appended AFTER every Latin family — the browser only reaches them for a character the earlier faces cannot draw, so Latin/European rendering is unchanged. NOTE these are only the DEFAULTS; when a skin is resolved, emitSkin() overwrites both tokens with the skin's own stack (+ the same CJK tail). */ --font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --heading-weight: 700; /* Shape (revives ThemePreset.shape.*) */ --radius-card: 0.75rem; /* theme.css .product-card default */ --radius-btn: var(--btn-r, 8px); /* theme.css button radius token */ --card-shadow: none; /* flat by default (theme cards are border-driven) */ --card-border-color: var(--color-border); /* Blog 2.0 (US-BLOG-001, R7) — long-form reading tokens. SAFE DEFAULTS off the * existing palette so the blog "just works" on any skin; each skin may override * these in its generated skin.css. The blog component CSS references them as * var(--blog-*, ) so classic (skin-engine OFF, this file not linked) * still renders correctly. Unused by non-blog pages ⇒ zero visual change. */ --blog-measure: 68ch; /* max reading column width */ --blog-body-size: 1.075rem; /* article body font-size */ --blog-body-leading: 1.75; /* article line-height */ --blog-lede-size: 1.25rem; /* opening paragraph */ --blog-link: var(--color-link); /* inline link colour */ --blog-rule: var(--color-border); /* dividers between posts */ --blog-muted: var(--color-text-muted); /* bylines / deks */ --blog-heading-transform: none; /* poker sets uppercase */ --blog-heading-tracking: -0.01em; /* heading letter-spacing */ } /* ── Phase 2 — new structural layouts (skin-layout axis) ─────────────────── * Applied via a `skin-layout-` class the generator appends to (on top * of the body `layout-`; theme.css is never touched). theme.css has no * `html.skin-layout-*` rules, so these scoped rules apply without collision. */ /* editorial-narrow — a single, narrow reading column (long-form / ledger feel) */ html.skin-layout-editorial-narrow main { max-width: 680px; } html.skin-layout-editorial-narrow .hero__inner { max-width: 680px; } /* cards-grid — the article list becomes an auto-fill card grid instead of a column */ html.skin-layout-cards-grid .article-cards__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } html.skin-layout-cards-grid .article-card { border-bottom: none; } /* ── Nav overflow defense-in-depth ──────────────────────────────────────── * A long nav label (page with no short navLabel → full SEO title) must never * blow out the header. theme.css does not set these layout properties on the nav * link, so this unscoped rule applies. (Primary fix is a short navLabel.) */ .site-nav__link, .nav-group__trigger { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }