:root { /* Neutral base, reused from elegante's token system for cohesion with the flagship case study */ --color-surface: #FAFAF8; --color-surface-alt: #F7F6F2; --color-card: #FFFFFF; --color-border: #D9D6CF; --color-border-strong: #A8A49D; --color-text-primary: #1A1918; --color-text-secondary: #6B6864; --color-text-tertiary: #A8A49D; --color-bg-hover: #EEECE8; /* Floating nav ground. Tokenized so the nav can follow a page theme instead of being pinned to the light surface. */ --nav-bg: rgba(250, 250, 248, 0.75); --nav-bg-scrolled: rgba(250, 250, 248, 0.92); /* Accent: flagship AI case study (elegante's actual primary) */ --accent-ai: #EE2D8E; --accent-ai-strong: #BB1F6E; --accent-ai-subtle: #FDE8F3; /* Accent: Saks Global multibrand DS */ --accent-saks-ds: #3B82F6; --accent-saks-ds-strong: #2563EB; --accent-saks-ds-subtle: #EAF1FE; /* Accent: Saks redesign */ --accent-saks-redesign: #C4863A; --accent-saks-redesign-strong: #9C6A2C; --accent-saks-redesign-subtle: #F7EBDC; /* Default site accent (landing page, nav), neutral until a case-study theme overrides it */ --accent: var(--color-text-primary); --accent-strong: var(--color-text-primary); --accent-subtle: var(--color-bg-hover); /* Type */ --font-serif: 'DM Serif Display', Georgia, serif; --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --fs-display: clamp(2.75rem, 2rem + 3vw, 3.9rem); --fs-h1: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); --fs-h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.85rem); --fs-h3: 1.375rem; --fs-h4: 1.125rem; --fs-body-lg: 1.15rem; --fs-body: 1rem; --fs-body-sm: 0.9rem; --fs-label: 0.8125rem; --fs-footnote: 0.75rem; /* Spacing (from elegante, extended for page-level layout) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --max-width: 1120px; } [data-theme="ai"] { --accent: var(--accent-ai); --accent-strong: var(--accent-ai-strong); --accent-subtle: var(--accent-ai-subtle); } [data-theme="saks-ds"] { --accent: var(--accent-saks-ds); --accent-strong: var(--accent-saks-ds-strong); --accent-subtle: var(--accent-saks-ds-subtle); } [data-theme="saks-redesign"] { --accent: var(--accent-saks-redesign); --accent-strong: var(--accent-saks-redesign-strong); --accent-subtle: var(--accent-saks-redesign-subtle); } /* More work: a dark ground so the page reads as a separate space from the three case studies. This only re-points existing variables, so every .cs-* and .floating-nav rule follows it with no component changes. TO REVERSE: delete data-theme="more-work" from in more-work.html. The page returns to the light palette and nothing else is affected. Accent is intentionally not set here, so it keeps inheriting --color-text-primary and stays a neutral near-white on this page. */ [data-theme="more-work"] { --color-surface: #121110; --color-surface-alt: #1A1817; --color-card: #1E1C1A; --color-border: #322F2B; --color-border-strong: #4F4A44; --color-text-primary: #F7F5F1; --color-text-secondary: #CFC9C0; --color-text-tertiary: #9A948B; --color-bg-hover: #262322; --nav-bg: rgba(18, 17, 16, 0.72); --nav-bg-scrolled: rgba(18, 17, 16, 0.92); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); }