/* ============================================ PUBLIC-TOKENS.CSS — Shared token aliases + reset for ALL public pages ============================================ Loaded by BOTH public page families, always BEFORE the family stylesheet: - marketing pages → components/head-assets.html (before landing.css) - auth/transactional pages → each template's (before base.css) This is the single home for the --color-* / --space-* / --transition-* alias layer that base.css and landing.css previously each defined (and let drift). Real values live in static/css/global/colours.css, typography.css and spacing.css — this file only aliases them (style-guide §5.0: one token vocabulary, tokens never differ). Family-specific tokens stay in the family file: - base.css → status colours, legacy --color-accent-* aliases, --shadow-card, its own --transition-fast (150ms), dark --color-paper-cool (#0b0c0d) - landing.css → --color-paper-dark, --color-surface-*, easing curves, its own --transition-fast (0.1s) ============================================ */ :root { /* Primary — aliases to the global colour system */ --color-primary: var(--bs-primary); --color-primary-hover: var(--bs-primary-active); --color-primary-light: rgba(var(--bs-primary-rgb), 0.08); /* = --scale-50; --bs-primary-light flips automatically in dark mode */ --color-primary-soft: var(--bs-primary-light); /* Ink hierarchy — the underlying globals flip in dark mode, so these aliases need no [data-bs-theme=dark] re-declaration */ --color-ink: var(--foreground); /* headings */ --color-ink-light: var(--foreground-soft); /* body text */ --color-ink-muted: var(--muted-foreground); /* subtitles, secondary */ --color-ink-faint: var(--muted-foreground-faint); /* captions, placeholders */ --color-paper: var(--background); --color-paper-cool: var(--slate-50); /* Borders */ --color-border: var(--slate-200); --color-border-light: var(--slate-100); /* Spacing — aliases to the canonical scale (global/spacing.css) */ --space-xs: var(--space-2); /* 0.5rem */ --space-sm: var(--space-3); /* 0.75rem */ --space-md: var(--space-4); /* 1rem */ --space-lg: var(--space-5); /* 1.5rem */ --space-xl: var(--space-6); /* 2rem */ --space-2xl: var(--space-8); /* 3rem */ --space-3xl: var(--space-10); /* 4rem */ --space-4xl: 6rem; /* public-only — no canonical equivalent */ /* Transitions — --transition-fast intentionally differs per family */ --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============ DARK MODE ============ */ [data-bs-theme=dark] { --color-paper-cool: var(--secondary); --color-border: rgba(255, 255, 255, 0.08); --color-border-light: rgba(255, 255, 255, 0.05); } /* ============ RESET ============ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }