/* /styles/tokens.css */ :root { /* Colors (exact hues preserved) */ --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 (exact) */ --shadow-soft: 0 2px 8px rgba(0,0,0,0.15); --shadow-medium: 0 4px 10px rgba(0,0,0,0.15); --shadow-overlay: 0 2px 8px rgba(176,138,72,0.9); /* overlay tint if needed */ /* Radii */ --radius-6: 6px; --radius-8: 8px; /* Spacing (exact magnitudes) */ --space-8: 8px; --space-10: 10px; --space-16: 16px; --space-20: 20px; --space-40: 40px; --space-60: 60px; /* Sizing used in header + frames */ --header-height: 156px; /* increased to fit larger logo */ --brand-logo-size: 160px; /* new: drives centered CLARIA logo size */ --logo-strip-padding-y: 4px; /* tighter vertical padding */ --logo-strip-padding-x: 40px; --doc-frame-height: 600px; /* unchanged */ } /* /styles/tokens.css */ /* Horizontal nav sizing + header offset */ :root { --sidebar-mobile-height: 70px; /* actual height for the horizontal bar */ --nav-height: var(--sidebar-mobile-height); --header-total: calc(var(--header-height) + var(--logo-strip-padding-y)); /* used by top: var(--header-total) */ } /* Add to /styles/tokens.css (optional) */ :root { /* Z-index layers (match your current usage: modal ~1000) */ --z-base: 1; --z-header: 10; --z-sidebar: 20; --z-overlay: 900; --z-modal: 1000; /* Motion & easing (respect reduced motion in components) */ --dur-quick: 120ms; --easing-standard: cubic-bezier(.2,.0,.2,1); /* Breakpoints (for @media only; doesn’t style anything by itself) */ --bp-mobile: 640px; --bp-tablet: 768px; --bp-desktop: 1280px; /* Safe-area helpers (used in layout/components if needed) */ --inset-top: env(safe-area-inset-top); --inset-bottom: env(safe-area-inset-bottom); } /* Dark mode tokens (hues preserved; no palette change) */ @media (prefers-color-scheme: dark) { :root { /* same hues; minor luminance adjustments only if needed by UA */ --color-text: #eaeaea; --color-muted: #c4c4c4; --color-bg: #2b2e2b; --color-bg-subtle: #1f201f; --color-bg-soft: #242524; --color-border-subtle: #3a3a3a; } /* /styles/tokens.css */ :root { /* ...your existing tokens... */ --color-footer-text: #fff; } @media (prefers-color-scheme: dark) { :root { /* ...your existing dark tokens... */ --color-footer-text: #fff; /* stays white */ } } } /* Layout width + sticky offsets for the horizontal dashboard bar */ :root { /* Match both the sidebar and main content width */ --content-max-width: 1360px; /* Minimum shared row height for the two-column area (tablet/desktop) */ --content-row-min-height: 560px; /* Compact tile height reference (images are 70px) */ --sidebar-mobile-height: 70px; --nav-height: var(--sidebar-mobile-height); } /* ================================================ 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; }