/* * 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. */ } /* ───────────────────────────────────────────────────────────────────────── * Phase 3 — Redesign token namespace (--mt-*) * * Additive, isolated namespace. No --color-* override. * Adopters reference --mt-* explicitly; legacy components keep --color-*. * Reason: the Phase 2 global token flip was deferred because of cascade * conflicts on .primary / .card .back / .result-card. A parallel namespace * sidesteps that risk. * ───────────────────────────────────────────────────────────────────────── */ :root { --mt-plum: #3d1a5c; --mt-plum-soft: #6b3d8a; --mt-plum-muted: rgba(61, 26, 92, 0.55); --mt-rose: #e8457a; --mt-rose-soft: rgba(232, 69, 122, 0.15); --mt-gold: #c9933a; --mt-gold-soft: rgba(201, 147, 58, 0.18); --mt-bg-gradient: linear-gradient(160deg, #f0eaff 0%, #fce4f0 50%, #e4f0ff 100%); --mt-surface-card: rgba(255, 255, 255, 0.90); --mt-shadow-panel: 0 4px 24px rgba(61, 26, 92, 0.10); --mt-shadow-card: 0 8px 32px rgba(61, 26, 92, 0.14); --mt-shadow-glow: 0 0 24px rgba(232, 69, 122, 0.28); --mt-shadow-glow-gold: 0 0 32px rgba(201, 147, 58, 0.40); --mt-card-back-bg: linear-gradient(135deg, #3d1a5c 0%, #6b3d8a 50%, #e8457a 100%); --mt-flip-duration: 650ms; --mt-flip-easing: cubic-bezier(0.34, 1.56, 0.64, 1); --mt-radius-card: 16px; --mt-radius-panel: 20px; --mt-radius-chip: 12px; --mt-radius-pill: 100px; --mt-nav-bg: rgba(255, 255, 255, 0.88); --mt-nav-border: rgba(61, 26, 92, 0.10); --mt-nav-icon-active: #3d1a5c; --mt-nav-icon-inactive: rgba(61, 26, 92, 0.35); --mt-streak-bar: linear-gradient(90deg, #e8457a 0%, #c9933a 100%); } /* ───────────────────────────────────────────────────────────────────────── * Phase 5 — Design-document palette additions * * The design document at "MeowTarot Redesign final.html" uses a richer * palette than what the Phase 3 --mt-* set covered. These additions map * 1:1 to the design doc's C.* tokens so home.css and any future page * rebuild can quote the design directly. Additive only — no override. * ───────────────────────────────────────────────────────────────────────── */ :root { --mt-plum-deep: #2a1142; --mt-plum-mid: #6a3f8e; --mt-plum-pale: #a487c4; --mt-rose-pale: #f6abc3; --mt-gold-deep: #d49a2c; --mt-gold-pale: #e8c478; --mt-cream: #fdf6ee; --mt-ink-soft: #7c5e96; --mt-bg-gradient-home: linear-gradient(180deg, #e9caea 0%, #f0c4d6 55%, #f4b0c4 100%); --mt-card-back-deep: linear-gradient(155deg, #3d1a5c 0%, #7a1f66 45%, #d12878 100%); --mt-honey-grad: linear-gradient(155deg, #c9933a 0%, #e8457a 100%); --mt-moonveil-grad: linear-gradient(155deg, #2a1d4a 0%, #7c6aa8 100%); --mt-cta-grad: linear-gradient(135deg, #6e1d4c 0%, #d12878 45%, #e8a838 100%); --mt-cta-shadow: 0 16px 32px -8px rgba(209, 40, 120, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.30); --mt-app-banner-grad: linear-gradient(135deg, rgba(61, 26, 92, 0.92), rgba(106, 63, 142, 0.92)); --mt-app-banner-shadow: 0 18px 30px -14px rgba(61, 26, 92, 0.50); --mt-soft-shadow: 0 10px 28px -10px rgba(61, 26, 92, 0.26), 0 2px 6px -2px rgba(61, 26, 92, 0.16); --mt-font-display: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif; --mt-font-display-th: "Noto Serif Thai", "Cormorant Garamond", serif; --mt-font-body: "DM Sans", "IBM Plex Sans Thai", system-ui, sans-serif; --mt-font-thai: "IBM Plex Sans Thai", "DM Sans", sans-serif; /* Per-page background gradients (additive — design-doc specific) */ --mt-bg-gradient-daily: linear-gradient(180deg, #ead4ee 0%, #efd0e2 100%); --mt-bg-gradient-daily-after: linear-gradient(180deg, #f1d9ee 0%, #f6dce5 100%); --mt-bg-gradient-question: linear-gradient(180deg, #f1d9ee 0%, #fadbe1 100%); }