/* Modern CSS Variables and Design System for Tapas Yoga HK */

:root {
  /* 2025 Color Palette - Warm, soft, natural with modern tech vibes */

  /* Primary Warm Orange - Comfort and energy */
  --yoga-primary: #FF8A50;
  /* Warm orange - main brand color */
  --yoga-primary-light: #FFB380;
  /* Lighter warm orange */
  --yoga-primary-dark: #E65100;
  /* Darker orange for contrast */
  --yoga-primary-soft: #FFF4E6;
  /* Very soft orange background */

  /* Secondary Warm Yellow - Optimism and clarity */
  --yoga-secondary: #FFD54F;
  /* Warm golden yellow */
  --yoga-secondary-light: #FFECB3;
  /* Light golden cream */
  --yoga-secondary-dark: #FF8F00;
  /* Rich amber */
  --yoga-secondary-soft: #FFFBF0;
  /* Soft yellow background */

  /* Accent Warm Red - Passion and vitality */
  --yoga-accent: #FF7043;
  /* Warm coral-red */
  --yoga-accent-light: #FFAB91;
  /* Light coral */
  --yoga-accent-dark: #D84315;
  /* Deep warm red */
  --yoga-accent-soft: #FFF3E0;
  /* Soft coral background */

  /* Natural Earth Tones */
  --yoga-earth: #8D6E63;
  /* Warm brown earth */
  --yoga-earth-light: #BCAAA4;
  /* Light earth */
  --yoga-earth-dark: #5D4037;
  /* Dark earth */
  --yoga-earth-soft: #F5F5F5;
  /* Soft earth background */

  /* Modern Tech Accents */
  --yoga-tech: #607D8B;
  /* Cool blue-gray for tech elements */
  --yoga-tech-light: #90A4AE;
  /* Light tech gray */
  --yoga-tech-dark: #37474F;
  /* Dark tech gray */
  --yoga-tech-soft: #F8FAFB;
  /* Soft tech background */

  /* Neutral Warm Grays - Enhanced for readability */
  --yoga-text: #2C1810;
  /* Deep warm brown for main text - high contrast */
  --yoga-text-medium: #4A2C1A;
  /* Medium warm brown for headings */
  --yoga-text-light: #6D4C41;
  /* Medium warm brown for secondary text */
  --yoga-text-muted: #8D6E63;
  /* Muted warm brown for hints/placeholders */
  --yoga-text-soft: #A1887F;
  /* Light brown for very subtle text */

  --yoga-bg: #FFFDF7;
  /* Warm white with yellow undertone */
  --yoga-bg-alt: #FFF8E1;
  /* Soft cream background */
  --yoga-bg-card: #FFFFFF;
  /* Pure white for cards */
  --yoga-bg-glass: rgba(255, 253, 247, 0.95);
  /* Glassmorphism background */

  --yoga-border: #F5F5F5;
  /* Very light warm border */
  --yoga-border-warm: #FFE0B2;
  /* Warm cream border */
  --yoga-border-tech: #E0F2F1;
  /* Tech-inspired border */

  /* Status Colors with 2025 warmth */
  --yoga-success: #66BB6A;
  /* Warm green */
  --yoga-warning: #FFB74D;
  /* Warm amber */
  --yoga-error: #EF5350;
  /* Warm red */
  --yoga-info: #42A5F5;
  /* Warm blue */

  /* Typography Scale - Optimized for EN/ZH-HK */
  --font-family-primary: 'Inter', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-display: 'Inter', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-chinese: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Hiragino Sans TC', '微軟正黑體', sans-serif;

  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */
  --font-size-4xl: 2.25rem;
  /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing Scale */
  --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-7: 1.75rem;
  /* 28px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */
  --space-16: 4rem;
  /* 64px */
  --space-20: 5rem;
  /* 80px */

  /* Border Radius */
  --radius-sm: 0.375rem;
  /* 6px */
  --radius-md: 0.5rem;
  /* 8px */
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-2xl: 1.5rem;
  /* 24px */
  --radius-full: 9999px;
  /* Fully rounded */

  /* Modern 2025 Shadows - Warm and soft */
  --shadow-sm: 0 1px 3px 0 rgba(255, 138, 80, 0.1);
  --shadow-md: 0 4px 12px -2px rgba(255, 138, 80, 0.15), 0 2px 4px -1px rgba(255, 138, 80, 0.1);
  --shadow-lg: 0 10px 25px -5px rgba(255, 138, 80, 0.2), 0 4px 10px -2px rgba(255, 138, 80, 0.1);
  --shadow-xl: 0 20px 40px -8px rgba(255, 138, 80, 0.25), 0 8px 16px -4px rgba(255, 138, 80, 0.15);
  --shadow-warm: 0 8px 32px rgba(255, 213, 79, 0.3);
  --shadow-glow: 0 0 20px rgba(255, 138, 80, 0.4);
  --shadow-tech: 0 4px 16px rgba(96, 125, 139, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Layout */
  --container-max-width: 1200px;
  --content-max-width: 800px;
  --form-max-width: 400px;

  /* Z-index */
  --z-modal: 1000;
  --z-dropdown: 100;
  --z-header: 50;
  --z-footer: 40;
}

/* Dark mode variables (for future implementation) */
@media (prefers-color-scheme: dark) {
  :root {
    --yoga-bg: #1A1A1A;
    --yoga-bg-alt: #242424;
    --yoga-bg-card: #2D2D2D;
    --yoga-text: #4e4e4e;
    --yoga-text-light: #444444;
    --yoga-text-muted: #000000;
    --yoga-border: #404040;
    --yoga-border-light: #333333;
  }
}

/* Modern reset and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: var(--line-height-normal);
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--yoga-text);
  background-color: var(--yoga-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus styles for accessibility */
:focus {
  outline: 2px solid var(--yoga-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--yoga-accent);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}