/* 
 * Semantic Design Tokens with Intelligence Context
 * Extracted from components.html with rich relationship metadata
 * 
 * These tokens are organized by semantic purpose rather than technical implementation
 * Each token includes usage context and relationship information for AI agents
 */

:root {
    /* ============================================================================
     * FOUNDATIONAL TOKENS - Base system values
     * ============================================================================ */
    
    /* Semantic Colors - Intent-based rather than literal */
    --surface-primary: 0 0% 100%;                    /* Main background surfaces */
    --surface-secondary: 210 40% 96.1%;              /* Secondary surfaces, cards */
    --surface-tertiary: 210 40% 96.1%;               /* Muted backgrounds */
    --surface-inverse: 222.2 84% 4.9%;               /* Dark surfaces in light mode */
    
    --content-primary: 222.2 84% 4.9%;               /* Primary text, headings */
    --content-secondary: 215.4 16.3% 46.9%;          /* Secondary text, captions */
    --content-tertiary: 215.4 16.3% 46.9%;           /* Muted text, placeholders */
    --content-inverse: 210 40% 98%;                   /* Text on dark surfaces */
    
    --border-primary: 214.3 31.8% 91.4%;             /* Default borders */
    --border-secondary: 214.3 31.8% 91.4%;           /* Subtle borders */
    --border-focus: 221.2 83.2% 53.3%;               /* Focus indicators */
    
    --action-primary: 221.2 83.2% 53.3%;             /* Primary actions */
    --action-primary-hover: 221.2 83.2% 48.3%;       /* Primary action hover */
    --action-secondary: 210 40% 96.1%;               /* Secondary actions */
    --action-destructive: 0 84.2% 60.2%;             /* Dangerous actions */
    
    --feedback-success: 142 76% 36%;                  /* Success states */
    --feedback-warning: 38 92% 50%;                   /* Warning states */
    --feedback-error: 0 84.2% 60.2%;                 /* Error states */
    --feedback-info: 221.2 83.2% 53.3%;              /* Informational states */
    
    /* Interaction States - Consistent across all components */
    --state-hover-opacity: 0.9;                      /* Standard hover opacity */
    --state-active-opacity: 0.95;                    /* Standard active opacity */
    --state-disabled-opacity: 0.5;                   /* Standard disabled opacity */
    --state-focus-ring: 0 0 0 2px hsl(var(--border-focus) / 0.2);
    
    /* Spacing Scale - Semantic spacing system */
    --space-component-padding: 0.625rem 1.25rem;     /* Standard component padding */
    --space-component-gap: 0.5rem;                   /* Gap between component elements */
    --space-section-gap: 2rem;                       /* Gap between major sections */
    --space-form-field-gap: 1.5rem;                  /* Gap between form fields */
    --space-touch-target: 44px;                      /* Minimum touch target size */
    
    /* Typography Scale - Semantic text hierarchy */
    --text-display: 3rem;                            /* Hero text, page titles */
    --text-heading-1: 2.25rem;                       /* Major headings */
    --text-heading-2: 1.875rem;                      /* Section headings */
    --text-heading-3: 1.5rem;                        /* Subsection headings */
    --text-body-large: 1.125rem;                     /* Emphasized body text */
    --text-body: 1rem;                               /* Default body text */
    --text-body-small: 0.875rem;                     /* Small text, captions */
    --text-caption: 0.75rem;                         /* Fine print, labels */
    
    /* Interactive Timing - Consistent animation durations */
    --timing-instant: 0ms;                           /* Immediate state changes */
    --timing-fast: 150ms;                            /* Quick interactions */
    --timing-normal: 250ms;                          /* Standard transitions */
    --timing-slow: 400ms;                            /* Deliberate animations */
    
    /* Border Radius Scale - Semantic rounding */
    --radius-none: 0px;                              /* Sharp corners */
    --radius-small: 4px;                             /* Subtle rounding */
    --radius-normal: 8px;                            /* Standard rounding */
    --radius-large: 12px;                            /* Pronounced rounding */
    --radius-full: 9999px;                           /* Fully rounded */
    
    /* Shadow Scale - Elevation system */
    --shadow-none: none;                             /* Flat appearance */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05); /* Barely noticeable */
    --shadow-normal: 0 1px 3px rgba(0, 0, 0, 0.1);  /* Standard elevation */
    --shadow-pronounced: 0 4px 12px rgba(0, 0, 0, 0.15); /* Clear elevation */
    --shadow-focus: var(--state-focus-ring);         /* Focus indication */
}

/* ============================================================================
 * DARK MODE OVERRIDES - Semantic tokens for dark theme
 * ============================================================================ */

.dark {
    --surface-primary: 222.2 84% 4.9%;
    --surface-secondary: 217.2 32.6% 17.5%;
    --surface-tertiary: 217.2 32.6% 17.5%;
    --surface-inverse: 0 0% 100%;
    
    --content-primary: 210 40% 98%;
    --content-secondary: 215 20.2% 65.1%;
    --content-tertiary: 215 20.2% 65.1%;
    --content-inverse: 222.2 84% 4.9%;
    
    --border-primary: 217.2 32.6% 17.5%;
    --border-secondary: 217.2 32.6% 17.5%;
    --border-focus: 217.2 91.2% 59.8%;
    
    --action-primary: 217.2 91.2% 59.8%;
    --action-primary-hover: 217.2 91.2% 65.8%;
    --action-secondary: 217.2 32.6% 17.5%;
    --action-destructive: 0 62.8% 30.6%;
    
    --feedback-success: 142 76% 46%;
    --feedback-warning: 38 92% 60%;
    --feedback-error: 0 62.8% 30.6%;
    --feedback-info: 217.2 91.2% 59.8%;
}

/* ============================================================================
 * EXTENDED COLOR PALETTES - For specialized use cases
 * ============================================================================ */

:root {
    /* Neutral Palette - Monochromatic grays */
    --neutral-50: 0 0% 98%;
    --neutral-100: 0 0% 96.1%;
    --neutral-200: 0 0% 89.8%;
    --neutral-300: 0 0% 83.1%;
    --neutral-400: 0 0% 63.9%;
    --neutral-500: 0 0% 45.1%;
    --neutral-600: 0 0% 32.2%;
    --neutral-700: 0 0% 25.1%;
    --neutral-800: 0 0% 14.9%;
    --neutral-900: 0 0% 9%;
    --neutral-950: 0 0% 3.9%;
    
    /* Stone Palette - Warm grays */
    --stone-50: 60 9% 98%;
    --stone-100: 60 4.8% 95.9%;
    --stone-200: 20 5.9% 90%;
    --stone-300: 24 5.7% 82.9%;
    --stone-400: 24 5.4% 63.9%;
    --stone-500: 25 5.3% 44.7%;
    --stone-600: 33.3 5.5% 32.4%;
    --stone-700: 30 6.3% 25.1%;
    --stone-800: 12 6.5% 15.1%;
    --stone-900: 24 9.8% 10%;
    --stone-950: 20 14.3% 4.1%;
    
    /* Zinc Palette - Cool grays */
    --zinc-50: 0 0% 98%;
    --zinc-100: 240 4.8% 95.9%;
    --zinc-200: 240 5.9% 90%;
    --zinc-300: 240 4.9% 83.9%;
    --zinc-400: 240 5% 64.9%;
    --zinc-500: 240 3.8% 46.1%;
    --zinc-600: 240 5.2% 33.9%;
    --zinc-700: 240 5.3% 26.1%;
    --zinc-800: 240 3.7% 15.9%;
    --zinc-900: 240 5.9% 10%;
    --zinc-950: 240 7.3% 4%;
    
    /* Slate Palette - Blue-tinted grays */
    --slate-50: 210 40% 98%;
    --slate-100: 210 40% 96%;
    --slate-200: 214 32% 91%;
    --slate-300: 213 27% 84%;
    --slate-400: 215 20% 65%;
    --slate-500: 215 16% 47%;
    --slate-600: 215 19% 35%;
    --slate-700: 215 25% 27%;
    --slate-800: 217 33% 17%;
    --slate-900: 222 84% 5%;
    --slate-950: 229 84% 5%;
}