/**
 * Wild Stories Design System
 *
 * Design tokens extracted from Figma:
 * https://www.figma.com/design/DUAsQV2fiPc8FiAFpm8fDe/Wild-Stories
 *
 * Table of Contents:
 * 1. Colors
 * 2. Typography
 * 3. Spacing
 * 4. Layout
 * 5. Effects
 * 6. Components
 */

:root {
	/* ==========================================================================
	   1. Colors
	   ========================================================================== */

	/* Brand Colors */
	--color-cream: #FAF7F0;
	--color-cream-dark: #EAD5C2;
	--color-charcoal: #2A2A2A;
	--color-charcoal-dark: #211E1E;
	--color-tan: #8B7355;
	--color-tan-light: #C4A77D;

	/* Neutral Colors */
	--color-white: #FFFFFF;
	--color-black: #000000;

	/* Gray Scale */
	--color-gray-50: #FAFAFA;
	--color-gray-100: #F5F5F5;
	--color-gray-200: #E5E5E5;
	--color-gray-300: #D4D4D4;
	--color-gray-400: #A3A3A3;
	--color-gray-500: #737373;
	--color-gray-600: #525252;
	--color-gray-700: #404040;
	--color-gray-800: #262626;
	--color-gray-900: #171717;

	/* Semantic Colors */
	--color-text-primary: var(--color-charcoal);
	--color-text-secondary: var(--color-tan);
	--color-text-muted: var(--color-gray-500);
	--color-text-light: var(--color-white);
	--color-text-light-muted: rgba(255, 255, 255, 0.6);
	--color-text-light-subtle: rgba(255, 255, 255, 0.4);

	--color-bg-primary: var(--color-cream);
	--color-bg-secondary: var(--color-cream-dark);
	--color-bg-dark: var(--color-charcoal);
	--color-bg-card: var(--color-white);

	--color-border-light: var(--color-gray-200);
	--color-border-dark: rgba(255, 255, 255, 0.3);

	/* Overlay Colors */
	--color-overlay-light: rgba(250, 247, 240, 0.8);
	--color-overlay-dark: rgba(0, 0, 0, 0.6);
	--color-overlay-gradient-start: rgba(0, 0, 0, 0);
	--color-overlay-gradient-end: rgba(0, 0, 0, 0.64);

	/* ==========================================================================
	   2. Typography
	   ========================================================================== */

	/* Font Families - From Figma */
	--font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Font Sizes - Figma Scale */
	--text-xs: 0.75rem;      /* 12px */
	--text-sm: 0.875rem;     /* 14px */
	--text-base: 1.125rem;   /* 18px */
	--text-lg: 1.25rem;      /* 20px */
	--text-xl: 1.25rem;      /* 20px */
	--text-2xl: 1.5rem;      /* 24px */
	--text-3xl: 2rem;        /* 32px */
	--text-4xl: 2.5rem;      /* 40px */
	--text-5xl: 3rem;        /* 48px */
	--text-6xl: 4rem;        /* 64px */
	--text-7xl: 6.875rem;    /* 110px - Hero */

	/* Font Weights */
	--font-light: 300;
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	/* Line Heights - From Figma */
	--leading-none: 1;
	--leading-tight: 1.1;      /* Headings */
	--leading-snug: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.556;  /* 28px / 18px - Body text */
	--leading-loose: 1.75;
	--leading-hero: 0.909;     /* 100px / 110px - Hero heading */

	/* Letter Spacing */
	--tracking-tight: -0.025em;
	--tracking-normal: 0;
	--tracking-wide: 0.05em;
	--tracking-wider: 0.1em;
	--tracking-widest: 0.2em;   /* 3.2px at 16px - Button text */

	/* ==========================================================================
	   3. Spacing
	   ========================================================================== */

	/* Base spacing unit: 8px */
	--space-0: 0;
	--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 - Container padding */
	--space-12: 3rem;     /* 48px */
	--space-16: 4rem;     /* 64px */
	--space-20: 5rem;     /* 80px - Section top padding */
	--space-24: 6rem;     /* 96px */
	--space-32: 8rem;     /* 128px - Button horizontal padding */
	--space-40: 10rem;    /* 160px */
	--space-48: 12rem;    /* 192px */

	/* ==========================================================================
	   4. Layout
	   ========================================================================== */

	/* Container */
	--container-max: 1440px;
	--container-content: 1360px;
	--container-narrow: 800px;
	--container-padding: var(--space-10);  /* 40px */

	/* Grid */
	--grid-columns: 12;
	--grid-gutter: var(--space-8);  /* 32px */

	/* Card Widths */
	--card-width-sm: 320px;
	--card-width-md: 432px;
	--card-width-lg: 546px;

	/* Section Heights */
	--hero-height: 1080px;
	--hero-height-mobile: 70vh;
	--section-min-height: 827px;
	--navbar-height: 120px;
	--navbar-height-mobile: 80px;
	--footer-height: 400px;

	/* Breakpoints (for reference - use in media queries) */
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1440px;

	/* ==========================================================================
	   5. Effects
	   ========================================================================== */

	/* Border Radius */
	--radius-none: 0;
	--radius-sm: 1px;      /* Buttons */
	--radius-md: 6px;      /* Cards, images */
	--radius-lg: 12px;
	--radius-full: 9999px;
	--radius-pill: 50px;   /* Nav dots */

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--shadow-text: 0 4px 4px rgba(0, 0, 0, 0.25);

	/* Blur */
	--blur-sm: 2px;
	--blur-md: 4px;
	--blur-lg: 8px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;
	--transition-slower: 500ms ease;

	/* Z-Index Scale */
	--z-below: -1;
	--z-base: 0;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-overlay: 400;
	--z-modal: 500;
	--z-popover: 600;
	--z-tooltip: 700;

	/* ==========================================================================
	   6. Component Tokens
	   ========================================================================== */

	/* Buttons */
	--btn-padding-x: var(--space-16);      /* 64px */
	--btn-padding-x-lg: var(--space-32);   /* 128px */
	--btn-padding-y: var(--space-4);       /* 16px */
	--btn-font-size: var(--text-base);
	--btn-font-weight: var(--font-medium);
	--btn-letter-spacing: var(--tracking-widest);
	--btn-radius: var(--radius-sm);

	/* Cards */
	--card-radius: var(--radius-md);
	--card-padding: var(--space-6);
	--card-aspect-ratio: 4 / 3;
	--card-aspect-ratio-tall: 4 / 5;
	--card-aspect-ratio-portrait: 3 / 4;

	/* Forms */
	--input-padding-x: var(--space-4);
	--input-padding-y: var(--space-3);
	--input-border-width: 1px;
	--input-radius: var(--radius-sm);
	--input-focus-ring-width: 2px;
	--input-focus-ring-color: var(--color-cream-dark);

	/* Hero */
	--hero-overlay-gradient: linear-gradient(
		to left,
		rgba(0, 0, 0, 0) 45%,
		rgba(0, 0, 0, 0.5) 100%
	);
	--hero-content-max-width: 600px;

	/* Navbar */
	--navbar-bg: rgba(0, 0, 0, 0.6);
	--navbar-logo-height: 64px;
	--navbar-menu-gap: var(--space-10);
}

/* ==========================================================================
   Dark Mode (optional - for sections with dark backgrounds)
   ========================================================================== */

[data-theme="dark"],
.section--dark {
	--color-text-primary: var(--color-white);
	--color-text-secondary: var(--color-cream-dark);
	--color-text-muted: var(--color-text-light-muted);
	--color-bg-primary: var(--color-charcoal);
	--color-bg-card: var(--color-charcoal-dark);
	--color-border-light: rgba(255, 255, 255, 0.2);
}