/* Design tokens for the JaydenZ Foundation site. Two themes share these same variable names: the default "foundation" theme (clean, white, restrained accents) and the "memorial" theme, applied via [data-theme="memorial"] on a page's or a section wrapper. Components should only ever reference these variables, never raw color/spacing values, so the same markup renders correctly under either theme. Palette pulled directly from the JaydenZ mark: black, deep burgundy/red, cream, and a distressed metallic silver. */ :root { /* ---- Foundation theme (default) ---- */ /* White is the ground. Red/burgundy are accents only — CTAs, small highlights, active states — never a section-wide wash. Dark sections use --color-carbon (neutral, no warm/red tint) for a serious-research-org feel; --color-charcoal (warm, brownish-black) is reserved for the Memorial theme below, where Jayden's rock identity is allowed to lead. */ --color-bg: #ffffff; --color-bg-alt: #f7f7f6; --color-surface: #ffffff; --color-surface-alt: #f2f2f1; --color-ink: #14161a; --color-ink-soft: #474d55; --color-ink-muted: #767c84; --color-on-dark: #f5f5f4; --color-on-dark-soft: rgba(245, 245, 244, 0.72); --color-burgundy: #6d1220; --color-red: #8f1524; --color-red-bright: #c81e3a; --color-cream: #efe6d3; --color-silver: #b9b3a9; --color-carbon: #111113; --color-carbon-soft: #1b1b1e; --color-charcoal: #16130f; --color-charcoal-soft: #221c17; --color-accent: var(--color-red); --color-accent-strong: var(--color-burgundy); --color-focus: #1c6fd6; --color-border: #e6e6e4; --color-border-strong: #cfcfcc; --color-success: #1f7a4d; --color-danger: #b3261e; /* Glass — used as an accent layer, not a default surface */ --glass-bg: rgba(255, 255, 255, 0.6); --glass-bg-dark: rgba(17, 17, 19, 0.55); --glass-border: rgba(255, 255, 255, 0.35); --glass-border-dark: rgba(245, 245, 244, 0.12); --glass-blur: 14px; /* Typography */ --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --fs-display-xl: clamp(2.75rem, 5vw + 1rem, 5.5rem); --fs-display-lg: clamp(2.25rem, 3.5vw + 1rem, 3.75rem); --fs-display-md: clamp(1.75rem, 2.2vw + 1rem, 2.75rem); --fs-heading: clamp(1.375rem, 1.2vw + 1rem, 1.75rem); --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8125rem; --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.6; /* Spacing scale */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 2px 10px rgba(23, 19, 15, 0.06); --shadow-md: 0 12px 32px rgba(23, 19, 15, 0.12); --shadow-lg: 0 24px 64px rgba(23, 19, 15, 0.18); --container-max: 1320px; --container-narrow: 860px; --z-nav: 100; --z-menu: 200; --z-mobile-nav: 150; --z-overlay: 300; --z-toast: 400; --motion-fast: 160ms; --motion-base: 280ms; --motion-slow: 520ms; --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---- Memorial theme override ---- */ /* Applied as [data-theme="memorial"] on for the Jayden's Story page. Same component markup, bolder token values — rock-and-metal identity allowed to take over without forking the design system. */ [data-theme='memorial'] { --color-bg: var(--color-charcoal); --color-bg-alt: var(--color-charcoal-soft); --color-surface: var(--color-charcoal-soft); --color-surface-alt: #2a221b; --color-ink: var(--color-on-dark); --color-ink-soft: #d8cdb9; --color-ink-muted: #a89c89; --color-accent: var(--color-red-bright); --color-accent-strong: var(--color-burgundy); --color-border: rgba(239, 230, 211, 0.16); --color-border-strong: rgba(239, 230, 211, 0.3); --glass-bg: var(--glass-bg-dark); --glass-border: var(--glass-border-dark); } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } }