/* ============================================================================= * Stryde SDK Skin — the platform's single source of truth for look & feel. * * Served at /sdk/stryde.css and (a) injected by the shell into every mounted * app iframe as the LAST stylesheet, and (b) linked at build time by each app. * Loaded last, it OVERRIDES an app's own CSS so every surface — in the shell or * standalone — reads as the superapp (req §6.5 / §18.3). Mirror of the canonical * design language in app/static/wiki.html. Bump SKIN_VERSION + the ?v= query and * the manifest design_system id ("stryde@N") together when this changes. * * 1. TOKENS — re-assert the palette in BOTH naming schemes (superapp hex * + the apps' HSL-channel vars) so app token blocks lose. * 2. BASE — unify the FONT (override the var the apps consume) + base * typography, links, selection, scrollbars, focus. Global + * automatic; intentionally light-touch so it never fights an * app's own good styling. * 3. COMPONENTS — the canonical `.stryde-*` classes (the wiki treatment) that * apps + the design-system primitives OPT INTO. This is the * "right SDK": build with these and you're plug-and-play — * wiki-grade with zero per-app CSS. * ========================================================================== */ /* ---- 1. TOKENS ---------------------------------------------------------- */ :root, html { /* superapp (hex) naming — used by the shell/wiki/admin surfaces */ --violet: #8B5CF6; --azure: #6BA4FF; --teal: #14B8C8; --warn: #FB923C; --ok: #34d399; --bad: #f87171; --grad: linear-gradient(105deg, var(--violet), var(--azure)); --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; --ease: cubic-bezier(.22, .7, .2, 1); /* FONT override — the apps' Tailwind `font-sans` resolves to these vars, so redefining them (loaded last, equal specificity → wins) flips every app to the superapp typeface with no !important and no app rebuild. */ --font-geist-sans: var(--sans); --font-geist-mono: var(--mono); /* apps' HSL-channel naming — consumed as hsl(var(--brand-violet)) etc. The apps already define these (matching values); we re-assert so they're present everywhere the skin loads. */ --brand-violet: 258 90 66; --brand-azure: 217 100 71; --brand-teal: 187 82 43; } /* IMPORTANT: the skin does NOT redefine surface tokens (--bg, --bg-elev, --bg-soft, --ink*, --line*, --shadow, --hi, --glass). Each surface owns those: the Tailwind apps define them as HSL CHANNELS and read them via hsl(var(--bg-elev)); the shell/wiki/launcher define them as hex. If the skin forced one format it would break the other — e.g. hsl() is invalid, which silently made every app card transparent. So we leave colour tokens alone and only contribute brand accents, the font, the glow, and the .stryde-* classes. `.stryde-*` rely on the host surface's own --bg-elev/--line/--shadow (hex on the shell/wiki, where they're used). */ html[dir="rtl"] { --sans: "SF Arabic", "Noto Naskh Arabic", "Geeza Pro", -apple-system, system-ui, sans-serif; } /* ---- 2. BASE ------------------------------------------------------------ */ html, body { font-family: var(--sans) !important; letter-spacing: -.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { /* Each surface owns its own background (apps via their globals, shell/wiki via their own CSS) — the skin only positions for the glow below. We do NOT set a background here: --bg differs in format per surface (hex vs HSL channels). */ position: relative; } /* The wiki's signature ambient art glow (violet top-right, teal bottom-left), applied to EVERY app so the whole platform shares one atmosphere. Fixed, behind content, non-interactive. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 480px at 82% -8%, color-mix(in srgb, var(--violet) 11%, transparent), transparent 60%), radial-gradient(760px 420px at -5% 8%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 55%); } button, input, select, textarea { font-family: var(--sans) !important; } code, pre, kbd, samp, .mono, [class*="mono"] { font-family: var(--mono) !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--sans) !important; letter-spacing: -.025em; } /* The wiki uses bold, tight display headings — match that so app titles read the same (apps often leave large headings at normal weight). */ h1, h2 { font-weight: 700 !important; letter-spacing: -.03em; } h3 { font-weight: 650 !important; } /* NOTE: we deliberately do NOT set a global `a { color }`. Cards, list rows and nav items are anchors, and a blanket link colour bleeds into their text (the "blue cards" bug). Apps colour their own prose links via `.stryde-link` or their own classes. */ .stryde-link { color: var(--azure); } ::selection { background: rgba(139, 92, 246, .30); color: var(--ink); } :focus-visible { outline: 2.5px solid var(--teal); outline-offset: 2px; border-radius: 8px; } /* themed scrollbars — a quiet but pervasive "feel" tell */ * { scrollbar-color: var(--line) transparent; } *::-webkit-scrollbar { width: 11px; height: 11px; } *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; } /* ---- 3. CANONICAL COMPONENTS — the "right SDK" surface ------------------ * * Opt-in classes that ARE the wiki treatment (values mirror wiki.html). An app * that builds with these (or the @stryde/design-system primitives that map to * them) is plug-and-play — it looks like the superapp with no per-app CSS. We * deliberately DON'T blanket-override raw /