/**
 * TangoHUB Design Tokens
 * Single source of truth for all styling decisions
 * 
 * This file establishes a hybrid design system that combines:
 * 1. BuddyBoss CSS variables for UI chrome (buttons, cards, text, borders)
 * 2. TangoHUB semantic colors for domain-specific elements (roles, status)
 * 
 * @package TangoHUB_Event_Manager
 * @since 1.0.0
 * @see docs/decisions/ADR-008-buddyboss-styling-integration.md
 */

/* ==========================================================================
   Design Tokens - CSS Variables
   ========================================================================== */

:root {
    /* ===== BUDDYBOSS INTEGRATION ===== */
    /* These inherit from BuddyBoss theme with safe fallbacks */
    /* When BuddyBoss theme colors are customized, these automatically update */
    
    --tgh-color-primary: var(--bb-primary-color, #007CBA);
    --tgh-color-primary-hover: var(--bb-primary-color-hover, #006BA1);
    --tgh-color-text: var(--bb-heading-text-color, #122B46);
    --tgh-color-text-light: var(--bb-body-text-color, #4D5C6D);
    --tgh-color-border: var(--bb-content-border-color, #E7E9EC);
    --tgh-color-background: var(--bb-content-background-color, #FFFFFF);
    --tgh-color-background-alt: var(--bb-content-alternate-background-color, #F8F9FA);
    
    /* ===== TANGOHUB SEMANTIC COLORS ===== */
    /* These are domain-specific and don't change with theme */
    /* Used for dance roles, event status, and tango-specific UI elements */
    
    /* Status colors */
    --tgh-color-success: #28A745;
    --tgh-color-warning: #FFC107;
    --tgh-color-danger: #DC3545;
    --tgh-color-info: #17A2B8;
    
    /* Dance role colors - industry standard for tango */
    --tgh-color-leader: #2563EB;        /* Blue - industry standard */
    --tgh-color-follower: #DB2777;      /* Pink - industry standard */
    --tgh-color-dual-role: #7C3AED;     /* Purple - both roles */
    --tgh-color-couple: #059669;        /* Green - couple registration */
    
    /* Role color variants (lighter backgrounds for badges) */
    --tgh-color-leader-light: #E3F2FD;
    --tgh-color-follower-light: #FCE4EC;
    --tgh-color-dual-light: #F3E5F5;
    --tgh-color-couple-light: #D1FAE5;
    
    /* ===== SPACING SYSTEM ===== */
    /* Consistent spacing throughout the plugin */
    
    --tgh-spacing-xs: 4px;
    --tgh-spacing-sm: 8px;
    --tgh-spacing-md: 16px;
    --tgh-spacing-lg: 24px;
    --tgh-spacing-xl: 32px;
    --tgh-spacing-xxl: 48px;
    
    /* ===== TYPOGRAPHY ===== */
    /* Font sizes using standard scale */
    
    --tgh-font-size-xs: 0.75rem;    /* 12px */
    --tgh-font-size-sm: 0.875rem;   /* 14px */
    --tgh-font-size-md: 1rem;       /* 16px */
    --tgh-font-size-lg: 1.125rem;   /* 18px */
    --tgh-font-size-xl: 1.25rem;    /* 20px */
    --tgh-font-size-xxl: 1.5rem;    /* 24px */
    
    /* Font weights */
    --tgh-font-weight-normal: 400;
    --tgh-font-weight-medium: 500;
    --tgh-font-weight-semibold: 600;
    --tgh-font-weight-bold: 700;
    
    /* ===== BORDERS & RADII ===== */
    
    --tgh-border-width: 1px;
    --tgh-border-radius-sm: 4px;
    --tgh-border-radius-md: 6px;
    --tgh-border-radius-lg: 8px;
    --tgh-border-radius-xl: 12px;
    --tgh-border-radius-pill: 999px;
    
    /* ===== SHADOWS ===== */
    
    --tgh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --tgh-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --tgh-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    
    /* ===== TRANSITIONS ===== */
    
    --tgh-transition-fast: 150ms ease-in-out;
    --tgh-transition-normal: 250ms ease-in-out;
    --tgh-transition-slow: 350ms ease-in-out;
    
    /* ===== Z-INDEX SCALE ===== */
    /* Consistent layering throughout the plugin */
    
    --tgh-z-base: 1;
    --tgh-z-dropdown: 100;
    --tgh-z-sticky: 200;
    --tgh-z-modal-backdrop: 900;
    --tgh-z-modal: 1000;
    --tgh-z-tooltip: 1100;
}

/* ==========================================================================
   Color Usage Guidelines (Quick Reference)
   ========================================================================== */

/*
WHEN TO USE BUDDYBOSS COLORS:
- Primary action buttons         → var(--tgh-color-primary)
- Card backgrounds               → var(--tgh-color-background)
- Text (headings)                → var(--tgh-color-text)
- Text (body)                    → var(--tgh-color-text-light)
- Borders                        → var(--tgh-color-border)
- Alternate backgrounds          → var(--tgh-color-background-alt)

WHEN TO USE TANGOHUB COLORS:
- Leader role badges/indicators  → var(--tgh-color-leader)
- Follower role badges/indicators→ var(--tgh-color-follower)
- Dual role indicators           → var(--tgh-color-dual-role)
- Couple registration            → var(--tgh-color-couple)
- Success states (confirmed)     → var(--tgh-color-success)
- Warning states (pending)       → var(--tgh-color-warning)
- Error/danger states (conflict) → var(--tgh-color-danger)
- Info states (help text)        → var(--tgh-color-info)
*/