/**
 * Design System Variables
 * 
 * Core design tokens for Blank Canvas Productions
 *
 * @package Blank_Canvas
 * @since 1.0.0
 */

:root {
	/* Colors */
	--color-primary: #D9D9D9;
	--color-gold: #D4AF37;
	--color-black: #000000;
	--color-white: #FFFFFF;
	--color-dark-gray: #1a1a1a;
	
	/* Typography */
	/* Temporary fallback fonts until custom fonts are uploaded */
	--font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-body: Georgia, "Times New Roman", serif;
	
	/* Font Sizes */
	--font-size-h1: 40px;
	--font-size-h2: 32px;
	--font-size-nav: 20px;
	--font-size-site-title: 32px;
	--font-size-body: 24px;
	
	/* Font Weights */
	--font-weight-regular: 500;
	--font-weight-bold: 700;
	
	/* Spacing */
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 48px;
	--spacing-xl: 64px;
	--spacing-xxl: 96px;
	
	/* Layout */
	--container-max-width: 1400px;
	--container-padding: 24px;
	
	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
	
	/* Z-index */
	--z-loading: 9999;
	--z-modal: 1000;
	--z-header: 100;
	--z-dropdown: 50;
}

/* Responsive Typography */
@media screen and (max-width: 768px) {
	:root {
		--font-size-h1: 32px;
		--font-size-h2: 24px;
		--font-size-nav: 18px;
		--font-size-site-title: 24px;
		--font-size-body: 18px;
		--container-padding: 16px;
	}
}

/* Typography Styles */
h1, .h1 {
	color: var(--color-primary);
	text-align: center;
	font-family: var(--font-heading);
	font-size: var(--font-size-h1);
	font-style: normal;
	font-weight: var(--font-weight-bold);
	line-height: normal;
}

h2, .h2 {
	color: var(--color-primary);
	text-align: center;
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	font-style: normal;
	font-weight: var(--font-weight-regular);
	line-height: normal;
}

body, p {
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-style: normal;
	font-weight: var(--font-weight-regular);
	line-height: normal;
}

/* Navigation Typography */
.site-title,
.site-title a {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: var(--font-size-site-title);
	font-style: normal;
	font-weight: var(--font-weight-bold);
	line-height: normal;
	text-decoration: none;
}

.main-navigation a {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: var(--font-size-nav);
	font-style: normal;
	font-weight: var(--font-weight-regular);
	line-height: normal;
	text-decoration: none;
	transition: color var(--transition-base);
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--color-gold);
}

/* Utility Classes */
.container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-white);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--color-black);
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}