/* ============================================================================ core.tokens.css — SHARED PROTECTED TOKENS ---------------------------------------------------------------------------- The only system-level file permitted to hold design literals. Owns ONLY values that must be identical across every piece. DOES NOT OWN: - a piece's palette, display scale or motion durations -> those live in that piece's css/main.css between the piece-token delimiters. Putting them here makes every later piece inherit them, which is how sameness returns. - the 640px mobile cutoff -> custom properties cannot be used in @media conditions and there is no preprocessor. It is a non-design constant owned by piece.schema.json and tools/validate.mjs, written literally in the media query. Consumed by CSS as var(--x) and by JS as getComputedStyle(el).getPropertyValue('--x'). ========================================================================== */ :root { /* --- Host chrome offset ------------------------------------------------- Top-anchored fixed UI uses top: var(--td-host-offset). 0px = overlay the host chrome (correct default; a host with no chrome). An adapter overrides this ON :root — never on a wrapper. Custom properties inherit downward only, and fixed UI is appended to , an ancestor of the CMS wrapper: a wrapper-scoped value is invisible to it and would silently resolve to 0px. Verified experimentally. Applies to top-anchored UI only; bottom-anchored UI is unaffected. ---------------------------------------------------------------------- */ --td-host-offset: 0px; /* --- Easing ------------------------------------------------------------- Curve shapes, not opinions about duration. A piece chooses its own durations; these describe how motion accelerates. ---------------------------------------------------------------------- */ --td-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --td-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --td-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); --td-ease-linear: linear; /* --- Spacing scale ------------------------------------------------------ Geometric ratio. Semantic names, no raw values in components. ---------------------------------------------------------------------- */ --td-space-3xs: 0.25rem; --td-space-2xs: 0.5rem; --td-space-xs: 0.75rem; --td-space-s: 1rem; --td-space-m: 1.5rem; --td-space-l: 2rem; --td-space-xl: 3rem; --td-space-2xl: 4rem; --td-space-3xl: 6rem; --td-space-4xl: 8rem; /* --- Radius scale ------------------------------------------------------- A grammar may forbid radius entirely; that is a grammar decision, not a token decision. Radius is applied to all four corners or not at all. ---------------------------------------------------------------------- */ --td-radius-none: 0; --td-radius-xs: 0.25rem; --td-radius-s: 0.5rem; --td-radius-m: 1rem; --td-radius-l: 1.75rem; --td-radius-pill: 62.4375rem; /* --- Layout widths ------------------------------------------------------ Reading measure and its multiples. A grammar chooses which to use where. ---------------------------------------------------------------------- */ --td-w-text: 40rem; --td-w-wide: 60rem; --td-w-wider: 80rem; --td-w-max: 105rem; /* --- Body size — INVARIANT I6 ------------------------------------------- 1.2rem on desktop and mobile. Not a preference. Verified by BODY_SIZE_DRIFT. ---------------------------------------------------------------------- */ --td-body-size: 1.2rem; /* --- Overlay stacking --------------------------------------------------- Host chrome on Genk sits at z-index 100. Overlays must clear it. ---------------------------------------------------------------------- */ --td-z-overlay: 9998; --td-z-modal: 9999; }