/**
 * Design Tokens & CSS Variables
 *
 * Global variables used across all pages for consistency and scalability
 * @package Skavend
 */

:root {
	/* Color Palette */
	--color-primary: #0b4232;
	--color-primary-light: #0c3527;
	--color-primary-dark: #07301f;
	--color-secondary: #b58a55;
	--color-secondary-light: #c69a5e;
	--color-secondary-dark: #9d6f42;
	--color-accent: #e2bd80;
	--color-accent-light: #e0b979;
	--color-accent-lighter: #f4e6cf;

	/* Neutrals */
	--color-bg-primary: #f6efe5;
	--color-bg-secondary: #f8f1e7;
	--color-bg-tertiary: #efe6d9;
	--color-text-primary: #152520;
	--color-text-secondary: #404a46;
	--color-text-tertiary: #5c6560;
	--color-text-light: #b07f45;
	--color-text-inverse: #f4ece0;

	/* Borders & Dividers */
	--color-border-light: rgba(255, 255, 255, .94);
	--color-border-subtle: rgba(178, 133, 74, .42);
	--color-border-dark: rgba(28, 50, 41, .16);

	/* Shadows */
	--shadow-sm: 0 4px 10px rgba(46, 60, 52, .06);
	--shadow-md: 0 14px 28px rgba(46, 60, 52, .12);
	--shadow-lg: 0 22px 44px rgba(46, 60, 52, .17);
	--shadow-xl: 0 22px 50px rgba(4, 40, 31, .2);
	--shadow-inner-light: 0 1px 0 rgba(255, 255, 255, .96) inset;
	--shadow-inner-border: 0 -1px 0 rgba(150, 125, 90, .16) inset;

	/* Typography */
	--font-serif: 'Playfair Display', Georgia, serif;
	--font-sans: 'DM Sans', Helvetica, Arial, sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Sizing */
	--size-container-max: 1420px;
	--size-container-padding: 96px;
	--size-section-gap: 96px;
	--size-section-gap-lg: 110px;
	--size-section-gap-sm: 60px;
	--size-gutter: 24px;
	--size-gap-small: 14px;
	--size-gap-medium: 24px;
	--size-gap-large: 42px;

	/* 90% of any viewport, 5% inset on each side — header and page shells. */
	--shell-width: 90%;
	--shell-gutter: 5%;

	/* Vertical rhythm — compact sections; hero uses --hero-space globally. */
	--section-space: 5%;
	--section-heading-size: clamp(28px, 2.5vw, 36px);
	--section-heading-line: 1.22;
	--hero-space: 1.5%;
	--section-gap: var(--section-space);
	--header-offset: 108px;

	/* Shared card hover */
	--card-lift: translateY(-8px);
	--card-shadow-hover: 0 22px 44px rgba(10, 48, 36, 0.16), 0 8px 18px rgba(193, 154, 107, 0.14);

	/* Icon color on dark/green surfaces vs. light/cream surfaces —
	   keeps every icon on the site drawn from the same two tokens
	   instead of relying on inherited body text color. */
	--icon-on-dark: var(--color-accent);
	--icon-on-light: var(--color-primary);

	/* Border Radius */
	--radius-small: 10px;
	--radius-medium: 15px;
	--radius-large: 24px;
	--radius-full: 999px;

	/* Transitions */
	--transition-fast: .18s ease;
	--transition-base: .3s ease;
	--transition-slow: .6s ease;

	/* Z-Index Scale */
	--z-base: 1;
	--z-dropdown: 10;
	--z-floating: 20;
	--z-modal-bg: 30;
	--z-modal: 40;
	--z-header: 50;
	--z-top: 999;

	/* Backdrop */
	--backdrop-blur: 12px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg-primary: #1a1f1d;
		--color-bg-secondary: #222827;
		--color-bg-tertiary: #2a2f2d;
		--color-text-primary: #f0f5f3;
		--color-text-secondary: #c8d0cb;
		--color-text-tertiary: #9ba4a0;
		--color-text-light: #b89968;
		--color-border-light: rgba(255, 255, 255, .12);
		--color-border-subtle: rgba(178, 133, 74, .24);
		--color-border-dark: rgba(255, 255, 255, .08);
	}
}