/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   NAZUMA 2026 Design System
   ========================================================================== */

:root {
	/* Brand Colors - Light Mode */
	--color-primary-green: #96C11F;
	--color-primary-cyan: #2DAAE1;
	--color-primary-red: #D60B52;
	--color-primary-orange: #EC783F;
	--color-primary-charcoal: #3C3C3B;

	/* Semantic Colors - Light Mode */
	--color-text-primary: #333333;
	--color-text-secondary: #555555;
	--color-text-tertiary: #777777;
	--color-text-inverse: #FFFFFF;
	--color-background: #FFFFFF;
	--color-background-alt: #F8F8F8;
	--color-border: #E4E4E4;
	--color-link: #1E8AB8;
	--color-link-hover: #156A8F;

	/* Typography */
	--font-family-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
	                     "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
	--font-family-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;

	/* Font Sizes - Fluid Typography with clamp() */
	--font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	--font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
	--font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
	--font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
	--font-size-xl: clamp(1.375rem, 1.2rem + 0.875vw, 1.75rem);
	--font-size-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
	--font-size-3xl: clamp(2.25rem, 1.875rem + 1.875vw, 3rem);

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

	/* Line Heights */
	--line-height-tight: 1.25;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;

	/* Spacing Scale - Fluid with clamp() */
	--space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
	--space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
	--space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
	--space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	--space-xl: clamp(2rem, 1.6rem + 2vw, 3rem);
	--space-2xl: clamp(3rem, 2.4rem + 3vw, 4rem);
	--space-3xl: clamp(4rem, 3.2rem + 4vw, 6rem);

	/* Border Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Transitions */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Layout */
	--container-max-width: 1200px;
	--header-height: clamp(4rem, 3.5rem + 2.5vw, 6rem);
	--section-padding-block: var(--space-2xl);
	--section-padding-inline: var(--space-lg);

	/* Z-Index Scale */
	--z-index-dropdown: 100;
	--z-index-sticky: 200;
	--z-index-fixed: 300;
	--z-index-modal: 400;
	--z-index-toast: 500;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	:root {
		--color-text-primary: #E5E5E5;
		--color-text-secondary: #B8B8B8;
		--color-text-tertiary: #8C8C8C;
		--color-text-inverse: #1A1A1A;
		--color-background: #1A1A1A;
		--color-background-alt: #252525;
		--color-border: #3A3A3A;
		--color-link: #5BC0E8;
		--color-link-hover: #7DD3F0;

		/* Adjust primary colors for dark mode */
		--color-primary-green: #A8D12F;
		--color-primary-cyan: #3FBCF1;
		--color-primary-red: #E81C62;
		--color-primary-orange: #F58A4F;
		--color-primary-charcoal: #E5E5E5;
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0ms;
		--transition-base: 0ms;
		--transition-slow: 0ms;
	}
}