/**
 * TSSM Skyline Heritage - Design Tokens
 *
 * CSS custom properties for the design system.
 * These tokens complement theme.json and provide additional
 * granular control for custom components and styles.
 *
 * @package TSSM_Skyline_Heritage
 * @version 1.0.0
 */

/* ==========================================================================
   Color System
   ========================================================================== */

:root {
    /* Primary Colors - Midnight Purple */
    --color-primary: #3D1A5E;
    --color-primary-dark: #2D0A4E;
    --color-primary-light: #8B5CF6;

    /* Secondary Colors - Bayside Blue
     * Base color #1E5AA8 for UI elements
     * Link color #5B9BD5 for WCAG AA compliance on dark backgrounds (7.3:1 contrast)
     */
    --color-secondary: #1E5AA8;
    --color-secondary-dark: #0A3D91;
    --color-secondary-light: #5B9BD5;

    /* Tertiary Colors - Gunmetal */
    --color-tertiary: #6B7280;
    --color-tertiary-light: #9CA3AF;
    --color-tertiary-dark: #4B5563;

    /* Background Colors */
    --color-background: #010101;
    --color-background-subtle: #1A1A1A;
    --color-background-elevated: #121213;

    /* Surface Colors */
    --color-surface: #232323;
    --color-surface-elevated: #2D2D2D;
    --color-surface-hover: #3A3A3A;

    /* Text Colors */
    --color-text: #FFFFFF;
    --color-text-secondary: #9CA3AF;
    --color-text-muted: #6B7280;

    /* Link Colors - Accessible on dark backgrounds */
    --color-link: #5B9BD5;
    --color-link-hover: #7BB3E5;

    /* Functional Colors */
    --color-success: #22C55E;
    --color-success-dark: #16A34A;
    --color-warning: #EAB308;
    --color-warning-dark: #CA8A04;
    --color-error: #EF4444;
    --color-error-dark: #DC2626;

    /* Border Colors */
    --color-border: #3A3A3A;
    --color-border-subtle: #2A2A2A;
    --color-border-focus: #5B9BD5;
}

/* ==========================================================================
   Typography System
   ========================================================================== */

:root {
    /* Font Family */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-family-mono: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* Font Sizes - Mobile First (base values) */
    --font-size-display: 48px;
    --font-size-h1: 36px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-body: 16px;
    --font-size-small: 14px;
    --font-size-micro: 12px;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;
}

/* Typography Scale - Tablet and up (640px) */
@media (min-width: 640px) {
    :root {
        --font-size-display: 60px;
        --font-size-h1: 42px;
        --font-size-h2: 32px;
        --font-size-h3: 26px;
        --font-size-h4: 22px;
        --font-size-body: 17px;
    }
}

/* Typography Scale - Desktop (1024px) */
@media (min-width: 1024px) {
    :root {
        --font-size-display: 72px;
        --font-size-h1: 48px;
        --font-size-h2: 36px;
        --font-size-h3: 28px;
        --font-size-h4: 24px;
        --font-size-body: 18px;
    }
}

/* ==========================================================================
   Spacing System
   ========================================================================== */

:root {
    /* Base unit: 4px */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* Semantic Spacing */
    --spacing-section-mobile: var(--space-7);
    --spacing-section-tablet: var(--space-8);
    --spacing-section-desktop: var(--space-9);

    --spacing-content-gap: var(--space-5);
    --spacing-card-padding: var(--space-5);
    --spacing-button-x: var(--space-5);
    --spacing-button-y: var(--space-3);
}

/* ==========================================================================
   Border Radius System
   ========================================================================== */

:root {
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
}

/* ==========================================================================
   Shadow System
   ========================================================================== */

:root {
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);

    /* Glow effects */
    --shadow-glow-primary: 0 0 20px rgba(61, 26, 94, 0.5);
    --shadow-glow-secondary: 0 0 20px rgba(91, 155, 213, 0.5);
}

/* ==========================================================================
   Transition System
   ========================================================================== */

:root {
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* Specific transitions */
    --transition-color: color var(--transition-base);
    --transition-background: background-color var(--transition-base);
    --transition-transform: transform var(--transition-base);
    --transition-opacity: opacity var(--transition-base);
    --transition-all: all var(--transition-base);
}

/* ==========================================================================
   Z-Index System
   ========================================================================== */

:root {
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ==========================================================================
   Layout System
   ========================================================================== */

:root {
    --layout-content-width: 1200px;
    --layout-wide-width: 1440px;
    --layout-narrow-width: 800px;

    /* Container padding */
    --layout-padding-mobile: var(--space-4);
    --layout-padding-tablet: var(--space-6);
    --layout-padding-desktop: var(--space-8);
}

/* ==========================================================================
   Breakpoints (for reference in JavaScript)
   ========================================================================== */

:root {
    --breakpoint-mobile-lg: 480px;
    --breakpoint-tablet: 640px;
    --breakpoint-tablet-lg: 778px;
    --breakpoint-desktop: 1024px;
    --breakpoint-desktop-lg: 1240px;
}

/* ==========================================================================
   Animation Tokens
   ========================================================================== */

:root {
    /* Easing functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Animation durations */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;
}