/**
 * CSS Variables
 *
 * @package FolèResidence
 */

/* Font Face Declarations */
@font-face {
	font-family: 'Self Modern';
	src: url('../fonts/Self Modern Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aileron';
	src: url('../fonts/Aileron-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Aileron';
	src: url('../fonts/Aileron-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colors */
	--color-primary: #2c3e50;
	--color-secondary: #34495e;
	--color-accent: #3498db;
	--color-text: #333333;
	--color-text-light: #666666;
	--color-white: #ffffff;
	--color-black: #000000;
	--color-overlay: rgba(0, 0, 0, 0.5);
	--color-background: #393f3a;
	--color-dark: #2c2c2c;
	--color-dark-charcoal: #2F3132;
	--color-beige: #E8E2D7;
	--color-amber: #E8A246;
	--color-divider: #4A4B4C;
	--color-text-secondary: #AAAAAA;

	/* Typography */
	--font-primary: 'Aileron', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--font-heading: 'Self Modern', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--font-serif: 'Self Modern', 'Playfair Display', 'Cormorant Garamond', 'Lora', Georgia, serif;
	--font-size-base: 14px;
	--font-size-small: 12px;
	--font-size-large: 16px;
	--font-size-xl: 20px;
	--font-size-2xl: 28px;
    --font-size-h3: 1.75rem;
    --font-size-h2: 2.5rem;
	--font-size-h1: 5rem;
	--font-size-logo: 1.125rem;
	--font-size-nav: 14px;
	--line-height-base: 1.4;
	--line-height-tight: 1.2;

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

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;

	/* Layout */
	--container-width: 100%;
	--header-height: 80px;
	--hero-padding-left: 40px;
	--hero-padding-right: 40px;
	--nav-padding-right: 40px;
}