/**
 * Design Tokens - CSS Custom Properties
 * 
 * Version: 1.0.0
 * Last Updated: 2026-03-05
 * 
 * This file defines all design tokens for the WeLiveTogether Design System.
 * Import this file FIRST before any other stylesheets.
 * 
 * Usage: var(--token-name)
 * Example: background-color: var(--color-primary-navy);
 */

:root {
  /* ============================================
     COLOUR TOKENS
     ============================================ */
  
  /* Primary Colours */
  --color-primary-navy: #1B2A4A;
  --color-secondary-teal: #1F7063;
  
  /* Semantic Colours */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
  
  /* Neutral Colours */
  --color-bg-white: #FFFFFF;
  --color-white: #FFFFFF; /* Alias for consistency */
  --color-surface-grey: #F8FAFC;
  --color-border-grey: #E2E8F0;
  --color-text-primary: #1E293B;
  --color-text-secondary: #64748B;
  --color-text-muted: #94A3B8;
  
  /* Semi-transparent Colours */
  --color-error-light: rgba(239, 68, 68, 0.1);
  --color-success-light: rgba(34, 197, 94, 0.1);
  --color-success-shadow: rgba(16, 185, 129, 0.15);
  --color-success-shadow-md: rgba(16, 185, 129, 0.2);
  --color-success-shadow-strong: rgba(16, 185, 129, 0.3);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-shadow-light: rgba(0, 0, 0, 0.05);
  
  /* Interactive State Colours */
  --color-focus: var(--color-secondary-teal);
  --color-hover-navy: #15213A; /* Navy darkened 10% */
  --color-active-navy: #0F1829; /* Navy darkened 15% */
  --color-hover-grey: #F1F5F9; /* Light grey for secondary hover */
  
  /* Spinner Colours */
  --color-spinner-border: rgba(0, 0, 0, 0.1);
  --color-spinner-active: var(--color-white);
  
  /* ============================================
     SPACING TOKENS (8px Grid System)
     ============================================ */
  
  --space-xs: 4px;   /* 0.5x base - Tight spacing, icon padding */
  --space-sm: 8px;   /* 1x base - Small gaps, form field spacing */
  --space-md: 16px;  /* 2x base - Default spacing, card padding */
  --space-lg: 24px;  /* 3x base - Section spacing, large cards */
  --space-xl: 32px;  /* 4x base - Major section spacing */
  --space-2xl: 48px; /* 6x base - Between major sections */
  --space-3xl: 64px; /* 8x base - Hero sections, large breaks */
  
  /* Component-specific spacing */
  --card-padding-mobile: var(--space-md);   /* 16px */
  --card-padding-desktop: var(--space-lg);  /* 24px */
  --section-gap: var(--space-2xl);          /* 48px */
  --content-gap: var(--space-lg);           /* 24px */
  
  /* ============================================
     TYPOGRAPHY TOKENS
     ============================================ */
  
  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                  'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font Sizes - Mobile First */
  --font-size-h1: 28px;
  --font-size-h2: 22px;
  --font-size-h3: 18px;
  --font-size-h4: 16px;
  --font-size-body: 15px;
  --font-size-body-small: 13px;
  --font-size-caption: 12px;
  
  /* Line Heights */
  --line-height-heading: 1.2;
  --line-height-h2: 1.3;
  --line-height-h3: 1.4;
  --line-height-h4: 1.4;
  --line-height-body: 1.6;
  --line-height-body-small: 1.5;
  --line-height-caption: 1.4;
  
  /* Letter Spacing */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;
  
  /* ============================================
     SIZING TOKENS
     ============================================ */
  
  /* Touch Targets */
  --touch-target-min: 44px;
  
  /* Content Widths */
  --content-max-width: 680px;  /* Body text max width */
  --page-max-width: 1200px;    /* Page container max width */
  
  /* Component Heights */
  --button-height: 44px;
  --input-height: 44px;
  --progress-bar-height: 8px;
  
  /* Icon Sizes */
  --icon-size-default: 20px;
  --icon-size-small: 16px;
  --icon-size-large: 24px;
  --icon-stroke-width: 1.5px;
  
  /* ============================================
     BORDER RADIUS TOKENS
     ============================================ */
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;  /* Full rounded (pills, badges) */
  
  /* Component-specific radii */
  --button-radius: var(--radius-md);    /* 8px */
  --input-radius: var(--radius-md);     /* 8px */
  --card-radius: var(--radius-lg);      /* 12px */
  --badge-radius: var(--radius-full);   /* Full round */
  --progress-radius: var(--radius-sm);  /* 4px */
  
  /* ============================================
     SHADOW TOKENS
     ============================================ */
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-default: 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 3px var(--color-secondary-teal);
  --shadow-focus-error: 0 0 0 3px var(--color-error);
  
  /* ============================================
     TRANSITION TOKENS
     ============================================ */
  
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.4s ease;
  
  /* Component-specific transitions */
  --transition-button: var(--transition-base);
  --transition-input: var(--transition-fast);
  --transition-card: var(--transition-slow);
  
  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  
  /* ============================================
     BREAKPOINT TOKENS
     (For JavaScript usage, not CSS)
     ============================================ */
  
  --breakpoint-mobile: 0;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  
  /* ============================================
     OPACITY TOKENS
     ============================================ */
  
  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;
  --opacity-loading: 0.6;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY (Desktop)
   ============================================ */

@media (min-width: 768px) {
  :root {
    /* Scale up font sizes for tablet/desktop */
    --font-size-h1: 36px;
    --font-size-h2: 28px;
    --font-size-h3: 22px;
    --font-size-h4: 18px;
    --font-size-body: 16px;
    --font-size-body-small: 14px;
    /* Caption stays 12px on all sizes */
  }
}

/* ============================================
   DARK MODE SUPPORT (Future-Proofing)
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Placeholder for dark mode tokens */
    /* Uncomment and customize when dark mode is implemented */
    
    /* --color-bg-white: #0F1419;
    --color-surface-grey: #1B2A4A;
    --color-border-grey: #2D3748;
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #CBD5E0;
    --color-text-muted: #A0AEC0; */
  }
}

/* ============================================
   REDUCED MOTION SUPPORT (Accessibility)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Override all transitions to be instant */
    --transition-fast: 0.01ms;
    --transition-base: 0.01ms;
    --transition-slow: 0.01ms;
    --transition-slower: 0.01ms;
  }
}

/* ============================================
   UTILITY: Print Style Tokens
   ============================================ */

@media print {
  :root {
    /* Optimize for print */
    --color-primary-navy: #000000;
    --color-text-primary: #000000;
    --color-text-secondary: #333333;
    --color-border-grey: #CCCCCC;
    
    /* Remove shadows for print */
    --shadow-subtle: none;
    --shadow-default: none;
    --shadow-elevated: none;
  }
}

/* ============================================
   DOCUMENTATION
   ============================================ */

/*
USAGE EXAMPLES:

1. Colour:
   color: var(--color-text-primary);
   background-color: var(--color-primary-navy);

2. Spacing:
   padding: var(--space-lg);
   margin-bottom: var(--space-md);
   gap: var(--space-sm);

3. Typography:
   font-family: var(--font-primary);
   font-size: var(--font-size-h2);
   line-height: var(--line-height-body);

4. Sizing:
   min-height: var(--touch-target-min);
   max-width: var(--content-max-width);

5. Shadows:
   box-shadow: var(--shadow-subtle);

6. Transitions:
   transition: all var(--transition-base);

7. Border Radius:
   border-radius: var(--button-radius);

RULES:
- ALWAYS use tokens, never hardcode values
- If a token doesn't exist, add it here first
- Document any new tokens clearly
- Test responsive behaviour at all breakpoints
- Verify accessibility (contrast, reduced motion)

ANTI-PATTERNS:
❌ color: #1B2A4A;              ✅ color: var(--color-primary-navy);
❌ padding: 24px;               ✅ padding: var(--space-lg);
❌ font-size: 16px;             ✅ font-size: var(--font-size-body);
❌ transition: all 0.2s;        ✅ transition: all var(--transition-base);
❌ border-radius: 8px;          ✅ border-radius: var(--button-radius);
*/