/* ========================================================= CloudAurum Design Tokens Source of truth: ~/cloudaurum/brand/BRAND-FOUNDATION.md Sprint v2 — 2026-05-07 ========================================================= */ :root { /* ----------------------------------------------------- COLOR — primary palette ----------------------------------------------------- */ --bg-page: #f4f3f1; /* primary parchment */ --bg-warm: #edecea; /* alt section bg */ --bg-cream: #faf8f5; /* lightest cream variant */ --bg-dark: #0e0d0b; /* deep charcoal, near black */ --bg-dark-warm: #14110d; /* dark with warm tint */ --bg-deeper: #050402; /* deepest, near pure */ --text-primary: #1c1917; /* heading + body, slightly warm black */ --text-body: #57534e; /* paragraph body */ --text-muted: #8a8580; /* captions, meta */ --text-faint: #b8b3ad; /* dividers, fine detail */ --text-on-dark: #f4f3f1; --text-on-dark-body: #cfcac3; --text-on-dark-muted: #a8a39d; /* ----------------------------------------------------- COLOR — gold system ----------------------------------------------------- */ --gold: #b08d57; /* primary brand gold */ --gold-light: #d4b87a; /* highlights, gradient stops */ --gold-deep: #8a6a3a; /* hover states, deep accents */ --gold-shimmer: #e8c97e; /* lightest, glints */ --gold-soft: rgba(176, 141, 87, 0.08); /* atmospheric wash */ --gold-medium: rgba(176, 141, 87, 0.18); /* mid emphasis */ --gold-strong: rgba(176, 141, 87, 0.32); /* strong emphasis */ /* ----------------------------------------------------- COLOR — atmospheric overlays + particles ----------------------------------------------------- */ --atmosphere-warm: rgba(176, 141, 87, 0.06); --atmosphere-darker: rgba(14, 13, 11, 0.92); --atmosphere-veil: rgba(14, 13, 11, 0.45); --shimmer-particle: rgba(232, 201, 126, 0.55); /* ----------------------------------------------------- COLOR — borders ----------------------------------------------------- */ --border-subtle: rgba(28, 25, 23, 0.06); --border-default: rgba(28, 25, 23, 0.10); --border-strong: rgba(28, 25, 23, 0.16); --border-on-dark: rgba(244, 243, 241, 0.08); --border-on-dark-strong: rgba(244, 243, 241, 0.14); --border-gold: rgba(176, 141, 87, 0.32); /* ----------------------------------------------------- TYPOGRAPHY — font stacks ----------------------------------------------------- */ --font-wordmark: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* LOGO ONLY */ --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Legacy aliases for any inline references still using these names */ --font-display-family: var(--font-serif); --font-body-family: var(--font-sans); /* ----------------------------------------------------- TYPOGRAPHY — type scale (fluid) ----------------------------------------------------- */ --font-display-xl: clamp(3.5rem, 9vw, 6.5rem); /* hero hero */ --font-display: clamp(2.75rem, 6vw, 4.75rem); /* big section H */ --font-h1: clamp(2.25rem, 4.5vw, 3.5rem); --font-h2: clamp(2.25rem, 4vw, 3.5rem); --font-h3: clamp(1.375rem, 2.2vw, 1.75rem); --font-h4: 1.125rem; --font-eyebrow: 0.6875rem; /* 11px */ --font-body-lg: 1.125rem; --font-body: 1rem; --font-body-sm: 0.9375rem; --font-caption: 0.8125rem; /* 13px */ --font-micro: 0.6875rem; /* 11px micro labels */ /* ----------------------------------------------------- TYPOGRAPHY — line heights + tracking ----------------------------------------------------- */ --lh-display: 1.05; --lh-headline: 1.15; --lh-tight: 1.3; --lh-body: 1.65; --lh-prose: 1.7; --track-display: -0.025em; --track-headline: -0.018em; --track-body: -0.005em; --track-eyebrow: 0.14em; --track-caps: 0.06em; /* ----------------------------------------------------- SPACING — 4px base, fluid scale ----------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; --sp-48: 192px; /* fluid section padding */ --section-pad-y: clamp(112px, 13vw, 192px); --section-pad-y-tight: clamp(80px, 9vw, 128px); --section-pad-y-xl: clamp(144px, 16vw, 240px); /* ----------------------------------------------------- LAYOUT ----------------------------------------------------- */ --container-max: 1280px; --container-narrow: 840px; --container-prose: 680px; --container-pad: clamp(20px, 4vw, 48px); --nav-h: 72px; /* ----------------------------------------------------- RADII ----------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ----------------------------------------------------- SHADOWS — restrained, premium ----------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-sm: 0 2px 6px rgba(28, 25, 23, 0.05); --shadow: 0 4px 12px rgba(28, 25, 23, 0.06), 0 1px 3px rgba(28, 25, 23, 0.04); --shadow-md: 0 8px 24px rgba(28, 25, 23, 0.08), 0 2px 6px rgba(28, 25, 23, 0.04); --shadow-lg: 0 16px 40px rgba(28, 25, 23, 0.10), 0 4px 12px rgba(28, 25, 23, 0.05); --shadow-xl: 0 24px 64px rgba(28, 25, 23, 0.12), 0 8px 20px rgba(28, 25, 23, 0.06); --shadow-gold: 0 0 0 1px var(--border-gold), 0 8px 24px rgba(176, 141, 87, 0.12); /* ----------------------------------------------------- MOTION ----------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-quick: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 120ms; --dur-quick: 200ms; --dur-base: 320ms; --dur-slow: 560ms; --dur-glide: 800ms; /* ----------------------------------------------------- Z-INDEX ----------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-nav: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* ========================================================= Dark context override (optional) Use class .on-dark on parent to flip text defaults ========================================================= */ .on-dark { color: var(--text-on-dark); --text-primary: var(--text-on-dark); --text-body: var(--text-on-dark-body); --text-muted: var(--text-on-dark-muted); --border-subtle: var(--border-on-dark); --border-default: var(--border-on-dark); --border-strong: var(--border-on-dark-strong); } /* ========================================================= Reduced motion ========================================================= */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-quick: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-glide: 0ms; } }