/**
 * CSS Variables / Design Tokens
 * These variables define the design system for the theme
 * 
 * @package Higashimatudo_Shika
 */

:root {
	/* ============================================
	   Colors
	   ============================================ */
	--color-primary: #087eae;
	--color-primary-dark: #056083;
	--color-primary-light: #4da7c5;
	
	--color-accent: #c5e8e6;
	--color-accent-light: #e6f5f4;
	--color-warm: #fff8ef;
	--color-warm-deep: #f4dfc8;
	--color-peach: #f7e1d5;
	
	--color-text: #333333;
	--color-text-light: #555555;
	--color-text-lighter: #999999;
	
	--color-background: #ffffff;
	--color-background-alt: #edf8fa;
	--color-background-light: #f8fcfc;
	
	--color-border: #dddddd;
	--color-border-light: #eeeeee;
	
	--color-success: #4caf50;
	--color-warning: #ff9800;
	--color-error: #f44336;
	--color-info: #2196f3;
	
	/* ============================================
	   Typography
	   ============================================ */
	--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Noto Sans JP', sans-serif;
	--font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Noto Sans JP', sans-serif;
	--font-family-monospace: 'Courier New', Courier, monospace;
	
	--font-size-xs: 0.875rem;       /* 14px */
	--font-size-sm: 0.875rem;       /* 14px */
	--font-size-base: 1.125rem;     /* 18px */
	--font-size-lg: 1.1875rem;      /* 19px */
	--font-size-xl: 1.4375rem;      /* 23px */
	--font-size-2xl: 1.75rem;       /* 28px */
	--font-size-3xl: 2.125rem;      /* 34px */
	--font-size-4xl: 2.625rem;      /* 42px */
	--font-size-5xl: 3.5rem;        /* 56px */
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	
	--line-height-tight: 1.2;
	--line-height-normal: 1.6;
	--line-height-relaxed: 1.9;
	--line-height-loose: 2;
	
	/* ============================================
	   Spacing (8px base unit)
	   ============================================ */
	--spacing-xs: 0.25rem;      /* 4px */
	--spacing-sm: 0.5rem;       /* 8px */
	--spacing-md: 1rem;         /* 16px */
	--spacing-lg: 1.5rem;       /* 24px */
	--spacing-xl: 2rem;        /* 32px */
	--spacing-2xl: 3rem;       /* 48px */
	--spacing-3xl: 4rem;       /* 64px */
	
	/* ============================================
	   Border Radius
	   ============================================ */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-full: 9999px;
	
	/* ============================================
	   Shadows
	   ============================================ */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	
	/* ============================================
	   Transitions
	   ============================================ */
	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;
	
	/* ============================================
	   Z-Index Scale
	   ============================================ */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
	
	/* ============================================
	   Container
	   ============================================ */
	--container-width: 1440px;
	--container-width-lg: 1440px;
	--container-padding: 2rem;
	--container-padding-mobile: 1rem;
	
	/* ============================================
	   Breakpoints (Mobile First)
	   ============================================ */
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--breakpoint-xxl: 1400px;
}

/* ============================================
   Dark Mode (Optional for future)
   ============================================ */
@media (prefers-color-scheme: dark) {
	:root {
		/* Adjust colors for dark mode if needed */
		/* --color-text: #f5f5f5; */
		/* --color-background: #1a1a1a; */
	}
}

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