/* ============================================ Elegant Stone — Design Tokens Theme: "Obsidian Bazaar" Structure: Material Design canonical tokens → Brand aliases mapped on top ============================================ */ :root { /* ══════════════════════════════════════════ MATERIAL REFERENCE TOKENS (md-ref) Raw palette values — never used directly ══════════════════════════════════════════ */ /* Primary: Antique Gold */ --md-ref-palette-primary10: #1E1700; --md-ref-palette-primary20: #3A2E00; --md-ref-palette-primary30: #574600; --md-ref-palette-primary40: #755F0A; --md-ref-palette-primary50: #8B7635; --md-ref-palette-primary60: #A89050; --md-ref-palette-primary70: #C9A84C; --md-ref-palette-primary80: #E2C97A; --md-ref-palette-primary90: #F5E6B0; --md-ref-palette-primary95: #FFF3D6; --md-ref-palette-primary99: #FFFBF5; /* Secondary: Oxidized Copper */ --md-ref-palette-secondary10: #1C0E03; --md-ref-palette-secondary20: #3A2210; --md-ref-palette-secondary30: #5A3820; --md-ref-palette-secondary40: #7C5133; --md-ref-palette-secondary50: #9A6A48; --md-ref-palette-secondary60: #B8855F; --md-ref-palette-secondary70: #C47D4E; --md-ref-palette-secondary80: #D9A07A; --md-ref-palette-secondary90: #F0C9A8; --md-ref-palette-secondary95: #FDECD8; /* Tertiary: Muted Emerald */ --md-ref-palette-tertiary10: #001F12; --md-ref-palette-tertiary20: #0A3520; --md-ref-palette-tertiary30: #1F4A32; --md-ref-palette-tertiary40: #2E6347; --md-ref-palette-tertiary50: #3D6B52; --md-ref-palette-tertiary60: #5A8A6C; --md-ref-palette-tertiary70: #78A888; --md-ref-palette-tertiary80: #97C5A5; --md-ref-palette-tertiary90: #B8E0C4; --md-ref-palette-tertiary95: #D8F2E0; /* Neutral: Warm Charcoal */ --md-ref-palette-neutral5: #0A0A08; --md-ref-palette-neutral10: #141410; --md-ref-palette-neutral15: #1A1A16; --md-ref-palette-neutral20: #1E1E18; --md-ref-palette-neutral25: #282820; --md-ref-palette-neutral30: #33332A; --md-ref-palette-neutral40: #4D4D42; --md-ref-palette-neutral50: #686858; --md-ref-palette-neutral60: #838370; --md-ref-palette-neutral70: #9E9E88; --md-ref-palette-neutral80: #BAB8A2; --md-ref-palette-neutral87: #CCC8B0; --md-ref-palette-neutral90: #D6D2BA; --md-ref-palette-neutral92: #E0DCC4; --md-ref-palette-neutral94: #E8E4CC; --md-ref-palette-neutral95: #F2EDE4; --md-ref-palette-neutral96: #F5F0E8; --md-ref-palette-neutral98: #FBF8F2; --md-ref-palette-neutral99: #FEFCF8; /* Error */ --md-ref-palette-error40: #BA1A1A; --md-ref-palette-error80: #FFB4AB; --md-ref-palette-error90: #FFDAD6; /* ══════════════════════════════════════════ MATERIAL SYSTEM TOKENS (md-sys) — DARK Role-based, theme-switchable ══════════════════════════════════════════ */ /* Color roles */ --md-sys-color-primary: var(--md-ref-palette-primary70); --md-sys-color-on-primary: var(--md-ref-palette-primary10); --md-sys-color-primary-container: var(--md-ref-palette-primary30); --md-sys-color-on-primary-container: var(--md-ref-palette-primary90); --md-sys-color-secondary: var(--md-ref-palette-secondary70); --md-sys-color-on-secondary: var(--md-ref-palette-secondary10); --md-sys-color-secondary-container: var(--md-ref-palette-secondary30); --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90); --md-sys-color-tertiary: var(--md-ref-palette-tertiary60); --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary10); --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30); --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90); --md-sys-color-surface: var(--md-ref-palette-neutral5); --md-sys-color-on-surface: var(--md-ref-palette-neutral96); --md-sys-color-surface-variant: var(--md-ref-palette-neutral15); --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral80); --md-sys-color-surface-container: var(--md-ref-palette-neutral10); --md-sys-color-surface-container-high: var(--md-ref-palette-neutral20); --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral25); --md-sys-color-outline: var(--md-ref-palette-neutral40); --md-sys-color-outline-variant: var(--md-ref-palette-neutral30); --md-sys-color-inverse-surface: var(--md-ref-palette-neutral95); --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral10); --md-sys-color-error: var(--md-ref-palette-error80); --md-sys-color-on-error: var(--md-ref-palette-error40); /* ── Brand Aliases ──────────────────────── */ /* Map Elegant Stone semantic names to Material roles */ --color-bg-primary: var(--md-sys-color-surface); --color-bg-secondary: var(--md-sys-color-surface-container); --color-bg-tertiary: var(--md-sys-color-surface-variant); --color-bg-elevated: var(--md-sys-color-surface-container-high); --color-text-primary: var(--md-sys-color-on-surface); --color-text-secondary: var(--md-sys-color-on-surface-variant); --color-text-tertiary: var(--md-ref-palette-neutral60); --color-text-inverse: var(--md-sys-color-inverse-on-surface); --color-gold: var(--md-sys-color-primary); --color-gold-light: var(--md-ref-palette-primary80); --color-gold-dim: var(--md-ref-palette-primary50); --color-copper: var(--md-sys-color-secondary); --color-copper-light: var(--md-ref-palette-secondary80); --color-amber: #E8A917; --color-emerald: var(--md-sys-color-tertiary); --color-emerald-deep: var(--md-ref-palette-tertiary20); --color-burgundy: #6B2D3A; --color-brown-warm: var(--md-ref-palette-neutral25); /* Functional — derived from system tokens */ --color-border: rgba(201, 168, 76, 0.12); --color-border-hover: rgba(201, 168, 76, 0.28); --color-overlay: rgba(10, 10, 8, 0.75); --color-overlay-heavy: rgba(10, 10, 8, 0.88); --color-glow: rgba(201, 168, 76, 0.08); --color-glow-strong: rgba(201, 168, 76, 0.15); /* ── Overlay-Safe Tokens ──────────────────── Theme-invariant foreground colors for text rendered on dark overlays / media scrims. These use md-ref values so they stay light regardless of active theme. */ --color-on-media: var(--md-ref-palette-neutral96); --color-on-media-accent: var(--md-ref-palette-primary80); --color-on-media-muted: var(--md-ref-palette-neutral90); --color-on-media-subtle: var(--md-ref-palette-neutral80); /* ── Decorative Effect Tokens ─────────────── Glow / shimmer colors for atmosphere.css decorative effects. Not elevation shadows. */ --color-effect-glow-gold: rgba(201, 168, 76, 0.07); --color-effect-glow-copper: rgba(196, 125, 78, 0.05); --color-effect-glow-emerald: rgba(61, 107, 82, 0.04); --color-effect-spark-gold: rgba(201, 168, 76, 0.8); --color-effect-spark-copper: rgba(196, 125, 78, 0.8); --color-effect-spark-emerald:rgba(61, 107, 82, 0.6); --color-effect-hover-gold: rgba(201, 168, 76, 0.2); --color-effect-hover-copper: rgba(196, 125, 78, 0.2); --color-effect-hover-emerald:rgba(61, 107, 82, 0.2); --color-effect-ambient-gold: rgba(201, 168, 76, 0.04); --color-effect-ambient-copper: rgba(196, 125, 78, 0.04); /* ── Media Scrim Tokens ───────────────────── Dark overlay / scrim stops used on hero, cards, lightbox, gallery hover, CTA bg. Centralized so no raw RGBA in components. */ --color-scrim-transparent: rgba(10, 10, 8, 0); --color-scrim-light: rgba(10, 10, 8, 0.25); --color-scrim-medium: rgba(10, 10, 8, 0.3); --color-scrim-strong: rgba(10, 10, 8, 0.55); --color-scrim-heavy: rgba(10, 10, 8, 0.7); --color-scrim-dense: rgba(10, 10, 8, 0.85); --color-scrim-max: rgba(10, 10, 8, 0.9); --color-scrim-near-opaque: rgba(10, 10, 8, 0.95); --color-scrim-backdrop: rgba(10, 10, 8, 0.6); /* ── Light-Theme Surface Alias ────────────── Routed through alias so components never reference md-ref directly. */ --color-surface-page: var(--md-sys-color-surface); /* ══════════════════════════════════════════ TYPOGRAPHY (md-sys-typescale) ══════════════════════════════════════════ */ --md-ref-typeface-brand: 'Cormorant Garamond', 'Georgia', serif; --md-ref-typeface-plain: 'Outfit', 'Segoe UI', sans-serif; --md-ref-typeface-accent: 'Cormorant', 'Georgia', serif; /* Brand aliases */ --font-display: var(--md-ref-typeface-brand); --font-body: var(--md-ref-typeface-plain); --font-accent: var(--md-ref-typeface-accent); /* Type scale */ --md-sys-typescale-display-large: clamp(3rem, 5vw + 1rem, 4.5rem); --md-sys-typescale-display-medium: clamp(2.25rem, 4vw + 0.5rem, 3.5rem); --md-sys-typescale-display-small: clamp(1.875rem, 3vw + 0.5rem, 2.75rem); --md-sys-typescale-headline-large: 2rem; --md-sys-typescale-headline-medium: 1.75rem; --md-sys-typescale-headline-small: 1.5rem; --md-sys-typescale-title-large: 1.375rem; --md-sys-typescale-title-medium: 1rem; --md-sys-typescale-body-large: 1.125rem; --md-sys-typescale-body-medium: 1rem; --md-sys-typescale-body-small: 0.875rem; --md-sys-typescale-label-large: 0.875rem; --md-sys-typescale-label-medium: 0.75rem; /* Brand aliases for existing code compat */ --text-display-lg: var(--md-sys-typescale-display-large); --text-display-md: var(--md-sys-typescale-display-medium); --text-display-sm: var(--md-sys-typescale-display-small); --text-headline-lg: var(--md-sys-typescale-headline-large); --text-headline-md: var(--md-sys-typescale-headline-medium); --text-headline-sm: var(--md-sys-typescale-headline-small); --text-title-lg: var(--md-sys-typescale-title-large); --text-title-md: var(--md-sys-typescale-title-medium); --text-body-lg: var(--md-sys-typescale-body-large); --text-body-md: var(--md-sys-typescale-body-medium); --text-body-sm: var(--md-sys-typescale-body-small); --text-label-lg: var(--md-sys-typescale-label-large); --text-label-md: var(--md-sys-typescale-label-medium); --leading-tight: 1.15; --leading-normal: 1.6; --leading-relaxed: 1.8; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.06em; --tracking-wider: 0.12em; /* ══════════════════════════════════════════ SPACING (4px base — Material Design) ══════════════════════════════════════════ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ══════════════════════════════════════════ SHAPE (md-sys-shape) ══════════════════════════════════════════ */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; /* Brand aliases */ --radius-xs: var(--md-sys-shape-corner-extra-small); --radius-sm: var(--md-sys-shape-corner-extra-small); --radius-md: var(--md-sys-shape-corner-small); --radius-lg: var(--md-sys-shape-corner-large); --radius-xl: var(--md-sys-shape-corner-extra-large); --radius-full: var(--md-sys-shape-corner-full); /* ══════════════════════════════════════════ ELEVATION ══════════════════════════════════════════ */ --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.36); --md-sys-elevation-2: 0 3px 6px rgba(0,0,0,0.28), 0 3px 6px rgba(0,0,0,0.34); --md-sys-elevation-3: 0 10px 20px rgba(0,0,0,0.32), 0 6px 6px rgba(0,0,0,0.30); --md-sys-elevation-4: 0 14px 28px rgba(0,0,0,0.38), 0 10px 10px rgba(0,0,0,0.28); /* Brand aliases */ --shadow-1: var(--md-sys-elevation-1); --shadow-2: var(--md-sys-elevation-2); --shadow-3: var(--md-sys-elevation-3); --shadow-4: var(--md-sys-elevation-4); --shadow-glow: 0 0 40px rgba(201, 168, 76, 0.08); --shadow-glow-strong: 0 0 60px rgba(201, 168, 76, 0.15); /* ══════════════════════════════════════════ MOTION ══════════════════════════════════════════ */ --md-sys-motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --md-sys-motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); --md-sys-motion-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1); --md-sys-motion-duration-short1: 100ms; --md-sys-motion-duration-short2: 150ms; --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 400ms; --md-sys-motion-duration-long1: 500ms; --md-sys-motion-duration-long2: 700ms; /* Brand aliases */ --ease-standard: var(--md-sys-motion-easing-standard); --ease-decelerate: var(--md-sys-motion-easing-decelerate); --ease-accelerate: var(--md-sys-motion-easing-accelerate); --ease-sharp: cubic-bezier(0.4, 0.0, 0.6, 1); --duration-micro: var(--md-sys-motion-duration-short2); --duration-short: var(--md-sys-motion-duration-medium1); --duration-medium: var(--md-sys-motion-duration-medium2); --duration-long: var(--md-sys-motion-duration-long1); /* ══════════════════════════════════════════ LAYOUT ══════════════════════════════════════════ */ --container-max: 1240px; --container-narrow: 860px; --container-padding: var(--space-6); --nav-height: 72px; --nav-height-mobile: 64px; } /* ══════════════════════════════════════════════ LIGHT THEME — "Obsidian Bazaar" light variant Per-theme on-* pairs for contrast safety ══════════════════════════════════════════════ */ [data-theme="light"] { /* Reassign Material system color roles */ --md-sys-color-primary: var(--md-ref-palette-primary40); --md-sys-color-on-primary: var(--md-ref-palette-primary99); --md-sys-color-primary-container: var(--md-ref-palette-primary90); --md-sys-color-on-primary-container: var(--md-ref-palette-primary10); --md-sys-color-secondary: var(--md-ref-palette-secondary40); --md-sys-color-on-secondary: var(--md-ref-palette-secondary95); --md-sys-color-secondary-container: var(--md-ref-palette-secondary90); --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10); --md-sys-color-tertiary: var(--md-ref-palette-tertiary40); --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary95); --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90); --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10); --md-sys-color-surface: var(--md-ref-palette-neutral98); --md-sys-color-on-surface: var(--md-ref-palette-neutral10); --md-sys-color-surface-variant: var(--md-ref-palette-neutral92); --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral40); --md-sys-color-surface-container: var(--md-ref-palette-neutral95); --md-sys-color-surface-container-high: var(--md-ref-palette-neutral94); --md-sys-color-surface-container-highest: #FFFFFF; --md-sys-color-outline: var(--md-ref-palette-neutral60); --md-sys-color-outline-variant: var(--md-ref-palette-neutral80); --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20); --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral96); --md-sys-color-error: var(--md-ref-palette-error40); --md-sys-color-on-error: #FFFFFF; /* Light-specific brand overrides */ --color-gold: var(--md-sys-color-primary); --color-gold-light: var(--md-ref-palette-primary50); --color-gold-dim: var(--md-ref-palette-primary30); --color-copper: var(--md-sys-color-secondary); --color-copper-light: var(--md-ref-palette-secondary50); --color-emerald: var(--md-sys-color-tertiary); /* Surface page — warm white for light theme sections */ --color-surface-page: var(--md-ref-palette-neutral99); /* Functional overrides for light */ --color-border: rgba(30, 28, 20, 0.10); --color-border-hover: rgba(30, 28, 20, 0.22); --color-overlay: rgba(251, 248, 242, 0.80); --color-overlay-heavy: rgba(251, 248, 242, 0.92); --color-glow: rgba(117, 95, 10, 0.06); --color-glow-strong: rgba(117, 95, 10, 0.12); /* Light elevation — softer shadows */ --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12); --md-sys-elevation-2: 0 3px 6px rgba(0,0,0,0.10), 0 3px 6px rgba(0,0,0,0.08); --md-sys-elevation-3: 0 10px 20px rgba(0,0,0,0.10), 0 6px 6px rgba(0,0,0,0.06); --md-sys-elevation-4: 0 14px 28px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.08); --shadow-glow: 0 0 40px rgba(117, 95, 10, 0.06); --shadow-glow-strong: 0 0 60px rgba(117, 95, 10, 0.10); }