/**
 * Utilities CSS - Common utility classes
 * Load order: 2nd (after site.css)
 *
 * Contents:
 * - Spacing utilities (Bootstrap extensions)
 * - Color utilities
 * - Display utilities
 * - Typography utilities
 * - Transition utilities
 *
 * NOTE: This file inherits CSS custom properties from design-tokens.css (loaded first).
 * All colors should reference design tokens for consistency.
 *
 * @version 1.1.0
 * @date 2026-02-08
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Legacy Aliases)
   These map to design-tokens.css for backward compatibility
   ========================================================================== */

:root {
    /* Primary Palette - Maps to design tokens */
    --primary-color: var(--color-primary, #0052CC);
    --primary-dark: var(--color-primary-hover, #0747A6);
    --primary-gradient: linear-gradient(180deg, var(--color-primary, #0052CC) 0%, var(--color-primary-hover, #0747A6) 100%);

    /* Success Palette - Maps to design tokens */
    --success-color: var(--color-success, #36B37E);
    --success-dark: var(--color-success-hover, #2E9E6C);
    --success-gradient: linear-gradient(180deg, var(--color-success, #36B37E) 0%, var(--color-success-hover, #2E9E6C) 100%);

    /* Danger Palette - Maps to design tokens */
    --danger-color: var(--color-danger, #DE350B);
    --danger-dark: var(--color-danger-hover, #BF2600);
    --danger-gradient: linear-gradient(180deg, var(--color-danger, #DE350B) 0%, var(--color-danger-hover, #BF2600) 100%);

    /* Warning Palette - Maps to design tokens */
    --warning-color: var(--color-warning, #FFAB00);
    --warning-dark: var(--color-warning-hover, #FF991F);
    --warning-gradient: linear-gradient(180deg, var(--color-warning, #FFAB00) 0%, var(--color-warning-hover, #FF991F) 100%);

    /* Info Palette - Maps to design tokens */
    --info-color: var(--color-info, #00B8D9);
    --info-dark: var(--color-info-hover, #00A3BF);
    --info-gradient: linear-gradient(180deg, var(--color-info, #00B8D9) 0%, var(--color-info-hover, #00A3BF) 100%);

    /* Neutral Palette - Maps to design tokens */
    --dark-color: var(--text-primary, #172B4D);
    --gray-100: var(--bg-subtle, #FAFBFC);
    --gray-200: var(--bg-hover, #EBECF0);
    --gray-300: var(--border-subtle, #DFE1E6);
    --gray-500: var(--text-tertiary, #7A869A);
    --gray-700: var(--text-secondary, #5E6C84);

    /* Shadows - Maps to design tokens */
    --shadow-xs: var(--shadow-sm, 0 1px 2px rgba(9, 30, 66, 0.08));
    --shadow-sm: var(--shadow-card, 0 1px 1px rgba(9, 30, 66, 0.08), 0 0 1px rgba(9, 30, 66, 0.12));
    --shadow-md: 0 3px 6px rgba(9, 30, 66, 0.15);
    --shadow-lg: 0 8px 16px rgba(9, 30, 66, 0.18);
    --shadow-xl: 0 12px 24px rgba(9, 30, 66, 0.22);

    /* Border Radius - Maps to design tokens */
    --radius-xs: 2px;
    --radius-sm: var(--radius-sm, 4px);
    --radius-md: var(--radius-md, 6px);
    --radius-lg: var(--radius-lg, 8px);
    --radius-xl: var(--radius-xl, 12px);

    /* Spacing - Maps to design tokens (8px grid) */
    --spacing-xs: var(--space-1, 4px);
    --spacing-sm: var(--space-2, 8px);
    --spacing-md: var(--space-4, 16px);
    --spacing-lg: var(--space-6, 24px);
    --spacing-xl: var(--space-8, 32px);
    --spacing-2xl: var(--space-12, 48px);

    /* Transitions - Maps to design tokens */
    --transition-xs: 100ms ease-in-out;
    --transition-sm: var(--transition-fast, 150ms ease-in-out);
    --transition-md: var(--transition-base, 200ms ease-in-out);
    --transition-lg: var(--transition-slow, 300ms ease-in-out);
}

/* ==========================================================================
   Spacing Utilities (Bootstrap extensions)
   ========================================================================== */

/* Extra small margin utilities */
.m-xs { margin: var(--spacing-xs) !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.ml-xs { margin-left: var(--spacing-xs) !important; }
.mr-xs { margin-right: var(--spacing-xs) !important; }
.mx-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.my-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }

/* Extra small padding utilities */
.p-xs { padding: var(--spacing-xs) !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pl-xs { padding-left: var(--spacing-xs) !important; }
.pr-xs { padding-right: var(--spacing-xs) !important; }
.px-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.py-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }

/* Extended margin utilities */
.mb-10 { margin-bottom: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }

/* Extended padding utilities */
.p-15 { padding: 15px !important; }
.pt-15 { padding-top: 15px !important; }
.pb-15 { padding-bottom: 15px !important; }
.px-15 { padding-left: 15px !important; padding-right: 15px !important; }

/* ==========================================================================
   Color Utilities
   ========================================================================== */

/* Text color utilities (beyond Bootstrap) */
.text-light-gray { color: #999 !important; }
.text-muted-custom { color: #6c757d !important; opacity: 0.75; }
.text-primary { color: var(--primary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }

/* Background color utilities (beyond Bootstrap) */
.bg-light-blue { background-color: #e3f2fd !important; }
.bg-light-green { background-color: #e8f5e9 !important; }
.bg-light-red { background-color: #ffebee !important; }
.bg-light-yellow { background-color: #fff9c4 !important; }

/* ==========================================================================
   Display Utilities (Bootstrap extensions)
   ========================================================================== */

.d-contents { display: contents !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }

/* Flexbox utilities */
.flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.flex-col {
    display: flex !important;
    flex-direction: column !important;
}

.flex-col-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

/* Alignment utilities */
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }

/* ==========================================================================
   Typography Utilities
   ========================================================================== */

.text-xs { font-size: 0.75rem !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-xl { font-size: 1.25rem !important; }

.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-semibold { font-weight: 600 !important; }
.font-weight-bold { font-weight: 700 !important; }

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ==========================================================================
   Opacity & Visibility Utilities
   ========================================================================== */

.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

.invisible { visibility: hidden !important; }
.visible { visibility: visible !important; }

/* ==========================================================================
   Border & Outline Utilities
   ========================================================================== */

.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }
.border-right-0 { border-right: 0 !important; }

.rounded { border-radius: var(--radius-md) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: 9999px !important; }

/* ==========================================================================
   Transition & Animation Utilities
   ========================================================================== */

.transition-fast { transition: all var(--transition-sm) !important; }
.transition-normal { transition: all var(--transition-md) !important; }
.transition-slow { transition: all var(--transition-lg) !important; }

.transition-none { transition: none !important; }

/* ==========================================================================
   Position & Size Utilities
   ========================================================================== */

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.min-w-0 { min-width: 0 !important; }
.max-w-100 { max-width: 100% !important; }
.max-h-100 { max-height: 100% !important; }

/* ==========================================================================
   Cursor & Pointer Utilities
   ========================================================================== */

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }