/* ========================================================================== Shreem Furniture — Design Tokens Shared premium design system: colour, type, spacing, radius, shadow, motion. Loaded first on every page so every other stylesheet can build on the same vocabulary. Adds no layout of its own beyond base resets, heading typography and reusable reveal/hover utilities. ========================================================================== */ :root { /* Brand colour (unchanged hues, refined for consistency) */ --color-primary: #0a4049; --color-primary-light: #216974; --color-primary-dark: #062a30; --color-accent: #c69a4e; --color-accent-light: #ddb876; --color-accent-dark: #9c7433; /* Neutrals */ --color-ink: #16201f; --color-body: #4b5354; --color-muted: #7c8384; --color-hairline: rgba(10, 40, 45, 0.1); --color-surface: #ffffff; --color-surface-alt: #f7f5f0; --color-surface-deep: #0a4049; /* Type */ --font-display: 'Fraunces', 'Georgia', serif; --font-body: 'Montserrat', sans-serif; /* Radius */ --radius-sm: 4px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Shadow */ --shadow-sm: 0 2px 14px rgba(10, 30, 34, 0.06); --shadow-md: 0 18px 45px rgba(10, 30, 34, 0.10); --shadow-lg: 0 30px 80px rgba(10, 30, 34, 0.16); /* Motion */ --ease-premium: cubic-bezier(0.16, 0.8, 0.24, 1); --dur-fast: 0.3s; --dur-med: 0.55s; --dur-slow: 0.9s; /* Layout */ --container: 1320px; --gutter: clamp(20px, 4vw, 60px); /* Semantic: brand-teal used as TEXT/border on a surface that flips dark (headings, links, outlined buttons). Distinct from --color-primary, which stays teal everywhere it's a fill/background (header, footer, filled buttons) so the brand colour itself never changes — only where it's read as foreground text. */ --color-heading-accent: var(--color-primary); } /* -------------------------------------------------------------------------- Dark theme — toggled via [data-theme="dark"] on (see script/theme.js). Brand colour (teal/gold) stays constant across themes; only surfaces and text swap, so the header/footer/promise band keep their identity while page content inverts. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --color-ink: #f2efe7; --color-body: #b8c0be; --color-muted: #8a9391; --color-hairline: rgba(255, 255, 255, 0.12); --color-surface: #0d1416; --color-surface-alt: #131c1e; --color-surface-deep: #06181b; --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.4); --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.5); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.6); --color-heading-accent: var(--color-accent-light); } /* Legacy inline styles (style="color: #0a4049" / "#000" / "black") appear throughout the older markup for headings and callouts on surfaces that flip dark. CSS attribute-selectors can't reliably match these — any script that touches el.style (reveal.js's transitionDelay, for one) makes the browser re-serialize the whole style attribute as rgb(), silently breaking a hex string match. script/theme.js fixes these properly via the CSSOM instead. */ /* Briefly applied by theme.js during a toggle so every colour property cross-fades instead of snapping. Removed again once the transition ends. */ :root.theme-transition, :root.theme-transition *, :root.theme-transition *::before, :root.theme-transition *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease, stroke 0.4s ease, box-shadow 0.4s ease !important; } html { scroll-behavior: smooth; } *, *::before, *::after { box-sizing: border-box; } body { background: var(--color-surface); color: var(--color-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; } a { -webkit-tap-highlight-color: transparent; } /* Elegant, consistent heading voice site-wide. Component stylesheets that need a different treatment (small UI labels, overlays) override with a more specific selector. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.2px; } ::selection { background: var(--color-accent); color: #fff; } /* Reduced motion: honour user preference everywhere */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Scroll-reveal utility (applied via script/reveal.js — no markup changes) ========================================================================== */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } .reveal-fade { transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }