/* /styles/myprofile/tokensmyprofile.css */ /* Page-scoped tokens for My Profile; loaded after shared tokens.css */ :root { /* Layout */ --content-max-width: 1360px; --page-gutter: 20px; /* Spacing scale */ --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 20px; /* Radii */ --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; /* Duration & easing */ --dur-quick: 140ms; --easing-standard: cubic-bezier(.2,.0,.2,1); /* Colors (scoped to page; keep in sync with global palette) */ --color-accent: #b08a48; /* brand gold */ --color-text: #2b2e2b; --color-muted: #666; --color-border-strong: #b08a48; --color-border: #aaa; --color-border-subtle: #e0e0e0; --color-bg: #fff; --color-bg-subtle: #f3f3f3; --color-bg-soft: #fafafa; /* Shadows */ --shadow-soft: 0 2px 8px rgba(0,0,0,0.15); --shadow-medium: 0 4px 10px rgba(0,0,0,0.15); } /* ================================================ EXPLICIT THEME CHOICE (wins over auto-dark) When is present, these override whatever the OS wants. ================================================ */ :root[data-theme="light"] { /* Light values (match your existing light tokens) */ --color-text: #2b2e2b; --color-muted: #666; --color-bg: #fff; --color-bg-subtle: #f3f3f3; --color-bg-soft: #fafafa; --color-border-subtle: #e0e0e0; /* footer text in light follows normal text color */ --color-footer-text: inherit; } :root[data-theme="dark"] { /* Dark values (match your existing dark tokens) */ --color-text: #eaeaea; --color-muted: #c4c4c4; --color-bg: #2b2e2b; --color-bg-subtle: #1f201f; --color-bg-soft: #242524; --color-border-subtle: #3a3a3a; --color-footer-text: #fff; }