/* ========================================================================== Boardology LLC — Design Tokens variables.css -------------------------------------------------------------------------- Wood-and-craft visual identity. All design tokens live here as CSS custom properties; every other stylesheet references these — no hardcoded colors, sizes, or timings elsewhere in the codebase. ========================================================================== */ /* -------------------------------------------------------------------------- Web fonts Playfair Display — elegant serif for headings Inter — clean sans-serif for body copy -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* ================================================================== Color palette — wood-inspired system ================================================================== */ /* Wood-tone backgrounds, deep walnut to warm chestnut */ --color-bg-deep: #1c1208; /* near-black walnut — page base */ --color-bg-mid: #2a1f0e; /* dark oak — elevated sections */ --color-bg-card: #3d2e18; /* medium wood — cards */ --color-bg-light: #5c4425; /* warm chestnut */ --color-wood-grain: #7a5c34; /* exposed grain highlight */ /* Metals + accents */ --color-gold: #c9a96e; /* aged brass / gold — primary accent */ --color-gold-light: #e8c98a; /* light gold highlight */ --color-accent-green:#4a5e3a; /* fresh herb dark green */ /* Text — aged parchment */ --color-cream: #f5f0e8; /* primary text */ --color-cream-muted: #c4b89a; /* muted parchment / secondary text */ /* ------------------------------------------------------------------ Legacy aliases — keep older token names mapped onto the new palette so existing rules continue to resolve correctly. ------------------------------------------------------------------ */ --color-bg: var(--color-bg-deep); --color-bg-elevated: var(--color-bg-mid); --color-bg-surface: var(--color-bg-light); --color-card: var(--color-bg-card); --color-text: var(--color-cream); --color-text-muted: var(--color-cream-muted); --color-text-subtle: #9c8e72; --color-accent: var(--color-gold); --color-accent-hover: var(--color-gold-light); --color-wood: var(--color-wood-grain); --color-border: #4a3820; --color-border-light: #6b4c2a; --color-overlay: rgba(15, 8, 2, 0.55); --color-overlay-strong:rgba(15, 8, 2, 0.85); --color-star: var(--color-gold); /* ================================================================== Wood texture A real photographic wood texture is used instead of CSS gradients. The image lives at images/ui/wood-bg.jpg and is applied in index.html. These tokens hold reusable overlay recipes layered over that image. ================================================================== */ --wood-image: url('../images/ui/wood-bg.jpg'); /* Dark glass overlay for sections sitting on the wood (smoked-glass look) */ --wood-overlay-section: linear-gradient(rgba(18, 10, 3, 0.88), rgba(18, 10, 3, 0.88)); /* Slightly lighter overlay for cards so the grain reads a touch more */ --wood-overlay-card: linear-gradient(rgba(20, 12, 4, 0.75), rgba(20, 12, 4, 0.75)); /* ================================================================== Glassmorphism — warm "smoked amber glass" cards on the wood board ================================================================== */ --glass-bg: rgba(180, 120, 40, 0.07); --glass-bg-hover: rgba(180, 120, 40, 0.13); --glass-border: rgba(201, 169, 110, 0.18); --glass-border-hover: rgba(201, 169, 110, 0.35); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --glass-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(201, 169, 110, 0.1); --glass-blur: blur(12px); --ease-glass: cubic-bezier(0.23, 1, 0.32, 1); /* ================================================================== Typography ================================================================== */ --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Fluid type scale (clamp: min, preferred-vw, max) */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20–24px */ --fs-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); /* 24–32px */ --fs-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); /* 32–48px */ --fs-3xl: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem); /* 40–72px */ --fs-hero: clamp(3.5rem, 8vw, 7rem); /* 56–112px */ /* Font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.6; --lh-relaxed: 1.8; /* Letter spacing */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.05em; --ls-wider: 0.15em; /* uppercase eyebrows / labels */ /* ================================================================== Spacing scale ================================================================== */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2.5rem; /* 40px */ --space-xl: 4rem; /* 64px */ --space-2xl: 6.5rem; /* 104px */ /* Section vertical rhythm (responsive) */ --section-padding: clamp(3.5rem, 2.5rem + 5vw, 7rem); /* Layout */ --container-max: 1200px; --container-narrow: 760px; --container-pad: clamp(1.25rem, 0.5rem + 3vw, 3rem); /* ================================================================== Border radius ================================================================== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ================================================================== Transitions ================================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 150ms var(--ease-soft); --transition-base: 250ms var(--ease-soft); --transition-slow: 400ms var(--ease-out); --transition-slower: 700ms var(--ease-out); /* ================================================================== Box shadows — subtle warm glows ================================================================== */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.65); --shadow-glow: 0 8px 32px rgba(201, 169, 110, 0.20); /* gold glow */ --shadow-glow-strong: 0 12px 48px rgba(201, 169, 110, 0.32); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-plank-top: inset 0 2px 6px rgba(0, 0, 0, 0.35); /* depth on plank top edge */ /* ================================================================== Z-index scale ================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 1000; --z-drawer: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400; /* ================================================================== Misc ================================================================== */ --nav-height: 84px; --backdrop-blur: 14px; }