/* * AISolver CMS — design tokens (SPEC §2) * Ported from the original "recap" theme. Light is the default (:root / [data-scheme="light"]); * dark overrides under [data-scheme="dark"]. Two states only (the OS-following "auto" block, which * nothing emitted, was deleted in V2-CLEANUP P5-S1c2). * All UI colors flow through these vars so flipping data-scheme re-themes the whole page. * * FAMILIES (V2-CLEANUP P5-S5, 2026-10-04): contrast scale, semantic roles, brand, status, CTA gradient, * typography, layout, spacing, radii. Every `--cs-color-*` token is declared in BOTH scheme blocks * (the dark block repeats a value that does not change, so a theme's `tokens.dark` can still override * it); scheme-independent families (typography, layout, spacing, radii) live in the light block only. * Pinned by tests/theme-tokens-families.test.ts. * * NO BREAKPOINT TOKENS, ON PURPOSE. `var()` is not valid in an `@media` prelude: custom properties * cascade on elements and a media query has no element (CSS Values 4 / Media Queries 4), so * `@media (max-width: var(--cs-bp-tablet))` is simply an invalid query. Breakpoints stay literals in * the component CSS. */ :root, [data-scheme='light'] { /* contrast scale (light) */ --cs-color-contrast-50: #e9e9e9; --cs-color-contrast-100: #e9e9e9; --cs-color-contrast-200: #d2d2d2; --cs-color-contrast-300: #bbbbbb; --cs-color-contrast-400: #a4a4a4; --cs-color-contrast-500: #808080; --cs-color-contrast-600: #6c6c6c; --cs-color-contrast-700: #494949; --cs-color-contrast-800: #343434; --cs-color-contrast-900: #232323; /* semantic roles (light) */ --cs-site-background: #fafafa; --cs-layout-background: #ffffff; --cs-color-primary: #161616; --cs-color-primary-contrast: #ffffff; --cs-color-secondary: #737373; --cs-color-accent: #206bea; --cs-color-border: #dbdbdb; --cs-color-button: #206bea; --cs-color-button-hover: #3b7ded; --cs-color-button-contrast: #ffffff; --cs-color-secondary-button: #e1e7f0; --cs-color-secondary-button-hover: #e3e9f1; --cs-color-secondary-button-contrast: #161616; --cs-header-background: #ffffff; --cs-footer-background: #fafafa; /* brand — the AISolver blue, the SAME in both schemes (unlike --cs-color-accent / -button, which turn neutral in dark). `-soft` is its light partner in the brand gradients; `-contrast` is what sits on a brand fill (text, or the white button on a brand panel). */ --cs-color-brand: #206bea; --cs-color-brand-soft: #8cb7ff; --cs-color-brand-contrast: #ffffff; /* status (light). Values are the ones the component CSS already paints; `-contrast` exists only where a text colour sits on the status fill (the preview bar). */ --cs-color-status-ok: #16a34a; --cs-color-status-warn: #b45309; --cs-color-status-warn-contrast: #ffffff; --cs-color-status-error: #b91c1c; --cs-color-status-info: #2563eb; /* the store tile's access badge (SPEC-CMS-STORE-AVATAR-FAMILIES-V1 §2.6) — FILLS under white text (`--cs-color-brand-contrast`), read ONLY by `.cs-creatorcard__tag--free` / `--owned` / `--gated` / `--sale`. Each keeps white text at ≥ 4.5:1 in its scheme (light: 5.2 / 5.0 / 5.0 / 5.5; dark: 4.65 / 4.65 / 4.8 / 4.9). `--gated` (an amber — GKOIBuilder SPEC-STORE-ACCESS-WHITELIST-V1 §2.3) is a gated asset's project chip; `--sale` (an emerald, distinct from `--owned`'s green — operator ruling 2026-10-25) is the "BUY" chip of a thing for sale. */ --cs-badge-free: #2563eb; --cs-badge-owned: #15803d; --cs-badge-gated: #b45309; --cs-badge-sale: #047857; /* CTA pill gradient border (blue -> coral) */ --cs-cta-gradient: linear-gradient(93.08deg, #8cb7ff 0%, #ff8486 100%); /* typography */ --cs-font-base: 'Inter', system-ui, -apple-system, sans-serif; --cs-font-display: 'Bricolage Grotesque', Georgia, serif; --cs-font-base-size: 1rem; --cs-font-base-line-height: 1.6; --cs-font-content-size: 1.125rem; --cs-heading-line-height: 1.2; --cs-heading-letter-spacing: -0.06em; --cs-h1-size: 3.375rem; --cs-h2-size: 2.625rem; --cs-h3-size: 2.125rem; --cs-h4-size: 1.625rem; --cs-h5-size: 1.25rem; --cs-h6-size: 1rem; /* layout */ --cs-container-mobile: 576px; --cs-container-tablet: 992px; --cs-container-desktop: 1248px; --cs-container-gutter: 24px; --cs-content-width: 776px; --cs-sidebar-width: 360px; --cs-column-gap: 32px; --cs-header-height: 64px; /* MENU BAR → FIRST CONTENT. The home page's gap, and now every index surface's (owner ruling 2026-09-05: the unified section header must start where the home page's first content does). It was a bare `padding-top: 1.5rem` on `.cms-hero-wrap` in components.css — the home hero slot, the only block that sits directly under the sticky header — and that rule now reads this token so the two surfaces cannot be given "the same" gap as two different numbers. `--cs-layout-pad-top` is `.cms-layout`'s own top padding, which every non-hero page already pays; a surface header tops it up to the gap above by the difference. Both are overridden together below the tablet breakpoint, where components.css already tightened the pair. */ --cs-page-top-gap: 1.5rem; --cs-layout-pad-top: 1.25rem; /* spacing — the 4px scale the component CSS measures to (P5-S5: 347 of 787 padding / margin / gap lengths are 4·8·12·16·24·32·48px). Scheme-independent. Declared for themes and new CSS; the existing component CSS is NOT rewritten onto it (P5-S5 substituted colours only). */ --cs-space-1: 4px; --cs-space-2: 8px; --cs-space-3: 12px; --cs-space-4: 16px; --cs-space-5: 24px; --cs-space-6: 32px; --cs-space-7: 48px; --cs-space-8: 64px; /* radii */ --cs-radius-header: 14px; --cs-radius-card: 10px; --cs-radius-thumbnail: 10px; --cs-radius-button: 8px; --cs-radius-input: 8px; --cs-radius-pill: 32px; --cs-radius-avatar: 6px; /* over media (scheme-independent: a control laid over a picture / video / 3D canvas reads the same in both schemes — GKOIBuilder SPEC-CMS-AVATAR-3D-VIEWER-V1, the character page's "View in 3D" pill and the viewer's stage) */ --cs-media-scrim: rgba(10, 11, 14, 0.68); --cs-media-scrim-strong: rgba(10, 11, 14, 0.86); --cs-media-edge: rgba(255, 255, 255, 0.35); --cs-media-ink: #ffffff; --cs-media-stage-dark: #0b0c10; color-scheme: light; } [data-scheme='dark'] { /* contrast scale (dark) */ --cs-color-contrast-50: #000000; --cs-color-contrast-100: #333333; --cs-color-contrast-200: #494949; --cs-color-contrast-300: #606060; --cs-color-contrast-400: #777777; --cs-color-contrast-500: #8e8e8e; --cs-color-contrast-600: #a4a4a4; --cs-color-contrast-700: #bbbbbb; --cs-color-contrast-800: #d2d2d2; --cs-color-contrast-900: #e9e9e9; /* semantic roles (dark) */ --cs-site-background: #161616; --cs-layout-background: #232323; --cs-color-primary: #ffffff; --cs-color-primary-contrast: #000000; --cs-color-secondary: #cdcdcd; --cs-color-accent: #ffffff; --cs-color-border: #343434; --cs-color-button: #3e3e3e; --cs-color-button-hover: #343434; --cs-color-button-contrast: #ffffff; --cs-color-secondary-button: #3e3e3e; --cs-color-secondary-button-hover: #343434; --cs-color-secondary-button-contrast: #ffffff; --cs-header-background: #232323; --cs-footer-background: #161616; /* brand (dark) — unchanged from light, repeated so the family is complete in both blocks */ --cs-color-brand: #206bea; --cs-color-brand-soft: #8cb7ff; --cs-color-brand-contrast: #ffffff; /* status (dark) — ok / error lighten (the pairs jobs.css and creators.css already override to); warn / info are painted the same in both schemes today */ --cs-color-status-ok: #4ade80; --cs-color-status-warn: #b45309; --cs-color-status-warn-contrast: #ffffff; --cs-color-status-error: #f87171; --cs-color-status-info: #2563eb; /* the access badge (dark) — a touch brighter on the dark ground, white text still ≥ 4.5:1 */ --cs-badge-free: #2f6fe4; --cs-badge-owned: #17863f; --cs-badge-gated: #b35a00; --cs-badge-sale: #008060; color-scheme: dark; } /* * THE DEFAULT THEME'S WEB FONTS, SELF-HOSTED (GKOIBuilder SPEC-PAGE-SPEED-V1 F3.1, 2026-11-03) — the families * `--cs-font-base` / `--cs-font-display` name, which the shell loaded from Google Fonts until then: Inter * 400–700 (+ italic 400) and Bricolage Grotesque 400–800, latin + latin-ext, `font-display: swap`. The files are the * theme's content-addressed vendor directory (assets/vendor/fonts--/, immutable). Each rule here is * byte-for-byte one of @cms/theme-aisolver `DEFAULT_FONT_FACES` (src/fonts.ts) — tests/fonts-self-hosted.test.ts. */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/theme/vendor/fonts-1.0.0-2b04a11f/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/theme/vendor/fonts-1.0.0-2b04a11f/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/theme/vendor/fonts-1.0.0-2b04a11f/inter-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/theme/vendor/fonts-1.0.0-2b04a11f/inter-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/theme/vendor/fonts-1.0.0-2b04a11f/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/theme/vendor/fonts-1.0.0-2b04a11f/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}