/* * MeowTarot — Safe Global Token Layer * css/theme-tokens.css * ───────────────────────────────────────────────────────────────────────── * * RISK LEVEL: Very Low * * WHAT THIS FILE DOES: * - Adds NEW tokens that do not exist in styles.css (zero collision risk) * - Does NOT touch selectors, components, or layouts * - Safe to load on every page immediately * * WHAT THIS FILE DOES NOT DO: * - Does not touch body background * - Does not touch any component class * - Does not change --radius-* or --space-* (layout risk) * - Does not change --shadow geometry * * HOW TO ADD: * In every HTML , after styles.css: * * ───────────────────────────────────────────────────────────────────────── */ :root { /* ── NEW TOKENS (additive — zero collision risk) ───────────────────── */ /* Pastel palette */ --color-pastel-bg: #fdf8ff; --color-pastel-surface: rgba(255, 255, 255, 0.88); --color-plum: #3d2c58; --color-plum-mid: #7a5f99; --color-plum-soft: #a48ec0; --color-lavender-soft: #c4a8f0; --color-blush-soft: #e8a8cc; --color-sky-soft: #90c8f0; --color-gold-warm: #b8895c; /* Glow tokens */ --glow-lavender: 0 0 36px rgba(181, 154, 232, 0.28), 0 0 80px rgba(181, 154, 232, 0.10); --glow-blush: 0 0 32px rgba(232, 168, 204, 0.25); --glow-gold: 0 0 28px rgba(184, 137, 92, 0.20); /* Border tokens */ --color-border-lavender: rgba(172, 130, 210, 0.18); --color-border-gold: rgba(184, 137, 92, 0.22); /* Pastel shadow tokens */ --shadow-pastel-sm: 0 4px 16px rgba(120, 80, 180, 0.09); --shadow-pastel-md: 0 8px 32px rgba(120, 80, 180, 0.12); --shadow-pastel-lg: 0 16px 48px rgba(120, 80, 180, 0.15); /* * Phase 2+ overrides intentionally commented out. * Do not uncomment as part of this task. */ }