/* ========================================================================== Cookie Design System — Safe Space runtime Single entry point for a standalone microsite. Import this ONE file, then set data-community="safespace" on : import "./tokens/cookie.css"; // or ... safespace.css already @imports the four foundation layers (_primitives, _platform, _typography, _spacing) in the correct order and scopes every semantic token to [data-community="safespace"]. This file just adds the @font-face for Mona Sans and a sensible base. ========================================================================== */ /* Brings in primitives -> platform (semantic) -> typography -> spacing, and the [data-community="safespace"] brand overrides. NOTE: @import must precede all other rules (except @charset/@layer) or the browser drops it — keep this above @font-face. */ @import "./safespace.css"; /* Mona Sans — the ONLY typeface in Cookie. Variable font, weights 200–900. */ @font-face { font-family: "Mona Sans"; src: url("./Mona-Sans.woff2") format("woff2-variations"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------------- Base — applies the foundations from first paint (never patch after the fact). Semantic color tokens are stored as HSL component lists (e.g. "302, 79%, 19%, 1"), so they MUST be consumed via hsl(): color: hsl(var(--text-primary)). --------------------------------------------------------------------------- */ :root { color-scheme: light; } html[data-community="safespace"] { font-family: var(--Typeface-family-text), system-ui, sans-serif; font-size: 16px; /* keeps rem-based sizing on the Cookie scale */ } body { margin: 0; font-family: var(--Typeface-family-text), system-ui, sans-serif; font-weight: var(--Typeface-weight-Medium); font-size: var(--Typeface-size-m); color: hsl(var(--text-primary)); background-color: var(--background-app); /* alias resolves to a primitive var */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Respect reduced-motion for any interaction patterns you adopt. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }