/* ================================================================ TOKENS.CSS — the canonical design-token layer (issue #1211) THE single source of truth for colour, spacing, radius, shadows, font stacks and the type scale. Loaded immediately after ss-main.css in every layout, so anything declared here wins over the sed-patched vendor :root block without forking it — edit HERE, never in ss-main.css. Rules of the road: - Components (components.css and everything else) reference these variables; no non-vendor CSS should hardcode a brand colour or font stack. - Legacy variable names (--ss-*, --badge-*, --text-color, …) are kept as aliases so existing CSS keeps working, but they resolve to the canonical tokens below. - Review surface: /admin/styleguide renders every token. ================================================================ */ :root { /* --------------------------------------------------------- 1. Brand palette (S&S coral) — mirrors ss-main.css values; this copy is authoritative. --------------------------------------------------------- */ --color-coral-base: #fd515b; --color-coral-base-rgb: 253, 81, 91; --color-coral-50: #ffe5e6; --color-coral-100: #fed2d4; --color-coral-200: #fd999d; --color-coral-300: #ed4650; --color-coral-400: #d60b27; --color-coral-500: #950518; --color-coral-600: #5a020a; --color-coral-700: #2c0002; /* The one brand accent. Historically base.css carried a second, competing "brand red" (#ee0310). Resolved (#1211): the accent is coral, and the strong/hover shade is coral-400. */ --lx-brand: var(--color-coral-base); --lx-brand-strong: var(--color-coral-400); --ss-brand-red: var(--lx-brand-strong); /* legacy alias */ --ss-coral: var(--color-coral-base); /* legacy alias (stride.css) */ --ss-red: var(--lx-brand-strong); /* legacy alias (stride.css) */ --ss-cyan: #53c2e5; /* S&S secondary cyan */ /* --------------------------------------------------------- 2. Neutrals — mirrors ss-main.css; authoritative copy. --------------------------------------------------------- */ --color-neutral-white: #fff; --color-neutral-50: #f5f5f5; --color-neutral-100: #ececec; --color-neutral-200: #d9d9d9; --color-neutral-300: silver; --color-neutral-400: #989898; --color-neutral-500: #646464; --color-neutral-600: #303030; --color-neutral-700: #1e1e1e; --color-neutral-black: #000; --ss-dark: #111111; /* page text / heading ink */ --ss-gray: #777777; /* mid grey */ --ss-light-gray: #d8d8d8; /* hairlines (was stride.css-only) */ --text-color: #333333; /* body copy on dense pages */ /* Common surface + hairline shades used across admin pages */ --lx-surface: var(--color-neutral-white); --lx-surface-muted: #f8f9fa; /* card/table-header wash */ --lx-surface-inset: #e9ecef; /* hover wash / wells */ --lx-border: #dee2e6; /* standard hairline */ --lx-border-strong: #ced4da; --lx-text-muted: #6c757d; /* secondary text */ /* --------------------------------------------------------- 3. Semantic status colours — soft chip trios (bg / fg / border) + strong solids. These are what badges, pills, chips, alerts and RAG markers compose from. --------------------------------------------------------- */ --lx-success-bg: #d1e7dd; --lx-success-fg: #0f5132; --lx-success-border: #a3cfbb; --lx-warning-bg: #fff3cd; --lx-warning-fg: #664d03; --lx-warning-border: #ffe69c; --lx-danger-bg: #f8d7da; --lx-danger-fg: #842029; --lx-danger-border: #f1aeb5; --lx-info-bg: #cff4fc; --lx-info-fg: #055160; --lx-info-border: #9eeaf9; --lx-neutral-bg: #e2e3e5; --lx-neutral-fg: #41464b; --lx-neutral-border: #c4c8cb; --lx-brand-bg: var(--color-coral-50); --lx-brand-fg: var(--color-coral-500); --lx-brand-border: var(--color-coral-100); --lx-accent-bg: #e2d9f3; --lx-accent-fg: #432874; --lx-accent-border: #c5b3e6; --lx-success-solid: #198754; --lx-warning-solid: #ffc107; /* pairs with dark text */ --lx-danger-solid: #dc3545; --lx-info-solid: #0dcaf0; --lx-blue-solid: #0d6efd; /* Bootstrap primary; progress bars, docs */ --lx-purple-solid: #7928ca; /* manual/curated markers */ /* --------------------------------------------------------- 4. Font stacks — authoritative copies of the ss-main stacks plus the mono stack (#716). --------------------------------------------------------- */ --font-stack-1: "ff-real-text-pro", sans-serif; --font-stack-2: "ff-real-text-pro-2", sans-serif; --font-stack-3: "Merriweather", serif; --font-stack-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --ss-font-primary: var(--font-stack-1); /* sans — headings/UI */ --ss-font-serif: var(--font-stack-3); /* serif — body copy */ --old-style-font: var(--ss-font-serif); /* legacy alias */ /* NOTE: the --bs-font-sans-serif / --bs-body-font-family overrides live in base.css, NOT here — tokens.css loads BEFORE bootstrap.min.css, so Bootstrap's own :root would win over any --bs-* set here. */ /* Canonical badge typography (#716) — every badge/chip takes font + weight from these. */ --badge-font: var(--font-stack-mono); --badge-font-weight: 500; /* --------------------------------------------------------- 5. Type scale — one heading + body scale for the app (headings render in --ss-font-primary at weight 300; see components.css). --------------------------------------------------------- */ /* Two h1 tiers: application pages (legislation-title scale — what a plain

renders) and landing/display (the home hero "Lex-Ray" treatment: bigger, one weight lighter, tighter leading; use .lx-h1--display). */ --lx-h1: 3rem; /* application pages (matches .heading-title) */ --lx-h1-display: 4.375rem; /* landing display, 70px (home hero desktop) */ --lx-h1-display-sm: 2.5rem; /* landing display below 768px (40px) */ --lx-display-weight: 200; --lx-h2: 2rem; --lx-h3: 1.5rem; --lx-h4: 1.25rem; --lx-h5: 1.1rem; --lx-h6: 1rem; --lx-heading-weight: 300; --lx-heading-tracking: -0.025em; --font-size-small: 12px; --font-size-normal: 14px; --font-size-large: 18px; --font-size-xlarge: 24px; --font-size-xxlarge: 42px; /* --------------------------------------------------------- 6. Spacing — ss-main's --space-1…14 is the canonical scale; the legacy --ss-space-* names map onto it exactly. --------------------------------------------------------- */ --ss-space-xs: var(--space-3); /* 10px */ --ss-space-sm: var(--space-5); /* 20px */ --ss-space-md: var(--space-6); /* 30px */ --ss-space-lg: var(--space-8); /* 50px */ --ss-space-xl: var(--space-10); /* 70px */ --section-spacing: 2rem; --content-padding: 1rem; /* --------------------------------------------------------- 7. Radii — the app's rounded-corner scale (S&S itself is square; Lexray uses gentle rounding). --------------------------------------------------------- */ --lx-radius-xs: 3px; --lx-radius-sm: 0.25rem; /* 4px — buttons, badges */ --lx-radius-md: 0.5rem; /* 8px — cards, panels, menus */ --lx-radius-lg: 12px; /* modals, large cards */ --lx-radius-pill: 9999px; /* --------------------------------------------------------- 8. Shadows + transitions --------------------------------------------------------- */ --lx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --lx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --lx-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --ss-transition-fast: 0.2s ease; --ss-transition-normal: 0.3s ease; /* --------------------------------------------------------- 9. Legacy aliases (kept for backward compatibility) --------------------------------------------------------- */ --background-color: #ffffff; --primary-color: var(--lx-blue-solid); --secondary-color: var(--lx-text-muted); }