/* ============================================
   RENASIA PROFESSIONAL - CSS Variables
   Premium Digital Product Catalog
    ============================================= */

:root {
	/* Primary Colors */
	--color-primary-gold: #A1743C;
	--color-deep-bronze: #6F4E28;
	--color-soft-champagne: #E8DED0;
	--color-ivory-bg: #FAF8F4;
	--color-pure-white: #FFFFFF;
	--color-text-charcoal: #22201D;
	--color-muted-text: #7A7065;
	--color-border-soft: #E5D8C8;

	/* Typography */
	--font-heading: "Cormorant Garamond", Georgia, serif;
	--font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Font Sizes */
	--font-size-hero: clamp(2.5rem, 5vw, 4.5rem);
	--font-size-h1: clamp(2rem, 4vw, 3rem);
	--font-size-h2: clamp(1.5rem, 3vw, 2.25rem);
	--font-size-h3: clamp(1.25rem, 2.5vw, 1.75rem);
	--font-size-body: clamp(0.9375rem, 1.2vw, 1.0625rem);
	--font-size-small: clamp(0.8125rem, 1vw, 0.875rem);
	--font-size-caption: 0.75rem;

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;

	/* Layout */
	--max-width: 1280px;
	--header-height: 72px;
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;

	/* Shadows */
	--shadow-soft: 0 1px 3px rgba(161, 116, 60, 0.06);
	--shadow-medium: 0 4px 12px rgba(161, 116, 60, 0.08);
	--shadow-hover: 0 8px 24px rgba(161, 116, 60, 0.12);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-normal: 300ms ease;
	--transition-slow: 500ms ease;

	/* Gold Gradient (subtle) */
	--gold-gradient: linear-gradient(135deg, #A1743C 0%, #C49A5C 50%, #A1743C 100%);
	--champagne-gradient: linear-gradient(180deg, #FAF8F4 0%, #F5F0E8 100%);

	/* Z-Index */
	--z-header: 100;
	--z-modal: 200;
	--z-overlay: 150;
}