/**
 * The Underground Dance Centre - Design System
 * ==============================================
 * A unified design system for consistent UI across all components.
 * Based on STYLE_GUIDE_V2.md - Modern EdTech/SaaS aesthetic.
 *
 * Version: 2.0.0
 * Last Updated: December 2024
 */

/* ==========================================================================
   CSS VARIABLES - Design Tokens
   ========================================================================== */

:root {
    /* -------------------------
       Colors - Backgrounds
       ------------------------- */
    --ug-canvas: #F5F7FA;
    --ug-canvas-light: #FAFBFC;
    --ug-card: #FFFFFF;

    /* -------------------------
       Colors - Primary Accent (Violet)
       ------------------------- */
    --ug-violet: #7C5CFC;
    --ug-violet-light: #9B7FFF;
    --ug-violet-soft: #EDE9FE;
    --ug-violet-muted: #DDD6FE;

    /* -------------------------
       Colors - Secondary Accents
       ------------------------- */
    --ug-mint: #34D399;
    --ug-mint-soft: #D1FAE5;
    --ug-coral: #FB7185;
    --ug-coral-soft: #FFE4E6;
    --ug-peach: #FDBA74;
    --ug-peach-soft: #FEF3C7;
    --ug-sky: #38BDF8;
    --ug-sky-soft: #E0F2FE;

    /* -------------------------
       Colors - Text
       ------------------------- */
    --ug-text-primary: #1A1A2E;
    --ug-text-secondary: #6B7280;
    --ug-text-tertiary: #9CA3AF;
    --ug-text-muted: #D1D5DB;
    --ug-text-inverse: #FFFFFF;
    --ug-text-disabled: #9CA3AF;

    /* -------------------------
       Colors - Borders
       ------------------------- */
    --ug-border: #E5E7EB;
    --ug-border-light: #F3F4F6;
    --ug-border-hover: #D1D5DB;

    /* -------------------------
       Colors - Functional
       ------------------------- */
    --ug-success: #34D399;
    --ug-success-soft: #D1FAE5;
    --ug-success-text: #059669;

    --ug-warning: #FDBA74;
    --ug-warning-soft: #FEF3C7;
    --ug-warning-text: #D97706;

    --ug-error: #EF4444;
    --ug-error-soft: #FEE2E2;
    --ug-error-text: #DC2626;

    --ug-info: #38BDF8;
    --ug-info-soft: #E0F2FE;
    --ug-info-text: #0284C7;

    /* -------------------------
       Colors - Third Party
       ------------------------- */
    --ug-spotify: #1DB954;
    --ug-spotify-soft: #D1FAE5;

    /* -------------------------
       Typography - Font Families
       ------------------------- */
    --font-primary: 'Plus Jakarta Sans', 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    --font-body: 'Plus Jakarta Sans', 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* -------------------------
       Typography - Font Sizes
       ------------------------- */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-caption: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 32px;

    /* -------------------------
       Typography - Font Weights
       ------------------------- */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* -------------------------
       Typography - Line Heights
       ------------------------- */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* -------------------------
       Typography - Letter Spacing
       ------------------------- */
    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.01em;
    --tracking-wider: 0.05em;

    /* -------------------------
       Spacing - 8px base unit
       ------------------------- */
    --space-0: 0;
    --space-1: 4px;    /* Tight icon gaps */
    --space-2: 8px;    /* Small gaps */
    --space-3: 12px;   /* Default inline */
    --space-4: 16px;   /* Standard gaps */
    --space-5: 20px;   /* Medium section */
    --space-6: 24px;   /* Card padding */
    --space-8: 32px;   /* Large section */
    --space-10: 40px;  /* Major breaks */
    --space-12: 48px;  /* Page-level */

    /* -------------------------
       Border Radius
       ------------------------- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* -------------------------
       Shadows - Soft & Diffused
       ------------------------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 12px 48px rgba(0, 0, 0, 0.10);
    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);

    /* Colored shadows */
    --shadow-violet: 0 4px 16px rgba(124, 92, 252, 0.25);
    --shadow-violet-lg: 0 8px 24px rgba(124, 92, 252, 0.30);
    --shadow-mint: 0 4px 16px rgba(52, 211, 153, 0.25);
    --shadow-coral: 0 4px 16px rgba(251, 113, 133, 0.25);

    /* -------------------------
       Transitions
       ------------------------- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-modal: 0.3s cubic-bezier(0.32, 0.72, 0, 1);

    /* -------------------------
       Z-Index Scale
       ------------------------- */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-tooltip: 700;
    --z-max: 2147483647;
}

/* ==========================================================================
   BREAKPOINT REFERENCE (for use in media queries)
   ==========================================================================

   Mobile:  max-width: 479px
   sm:      min-width: 480px (Mobile landscape)
   md:      min-width: 768px (Tablet)
   lg:      min-width: 1024px (Desktop)
   xl:      min-width: 1280px (Large desktop)

   Usage:
   @media (min-width: 480px) { ... }
   @media (min-width: 768px) { ... }
   @media (min-width: 1024px) { ... }
   @media (min-width: 1280px) { ... }

   ========================================================================== */


/* ==========================================================================
   BUTTON COMPONENTS
   ========================================================================== */

/**
 * Base Button Styles
 * Applied to all button variants
 */
.ug-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    /* Typography - V2: Sentence case, Plus Jakarta Sans */
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    line-height: var(--leading-none);

    /* Sizing */
    padding: var(--space-3) var(--space-5);
    min-height: 44px;  /* WCAG touch target */

    /* Appearance - V2: Rounded corners */
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;

    /* Transitions */
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        transform var(--transition-fast),
        box-shadow var(--transition-base);

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
}

.ug-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ug-violet-soft);
}

/* -------------------------
   Button - Primary Variant (Violet)
   ------------------------- */
.ug-btn--primary {
    background-color: var(--ug-violet);
    color: var(--ug-text-inverse);
}

.ug-btn--primary:hover {
    background-color: var(--ug-violet-light);
    box-shadow: var(--shadow-violet);
    transform: translateY(-1px);
}

.ug-btn--primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.ug-btn--primary:disabled,
.ug-btn--primary[disabled] {
    background-color: var(--ug-border);
    color: var(--ug-text-tertiary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* -------------------------
   Button - Secondary Variant (Soft Violet)
   ------------------------- */
.ug-btn--secondary {
    background-color: var(--ug-violet-soft);
    color: var(--ug-violet);
}

.ug-btn--secondary:hover {
    background-color: var(--ug-violet-muted);
}

.ug-btn--secondary:active {
    background-color: var(--ug-violet-muted);
    transform: scale(0.98);
}

.ug-btn--secondary:disabled,
.ug-btn--secondary[disabled] {
    background-color: var(--ug-border-light);
    color: var(--ug-text-tertiary);
    cursor: not-allowed;
    transform: none;
}

/* -------------------------
   Button - Ghost Variant
   ------------------------- */
.ug-btn--ghost {
    background-color: transparent;
    color: var(--ug-text-secondary);
    border: 1px solid var(--ug-border);
}

.ug-btn--ghost:hover {
    background-color: var(--ug-canvas);
    border-color: var(--ug-border-hover);
    color: var(--ug-text-primary);
}

.ug-btn--ghost:active {
    background-color: var(--ug-canvas);
    transform: scale(0.98);
}

.ug-btn--ghost:disabled,
.ug-btn--ghost[disabled] {
    background-color: transparent;
    border-color: var(--ug-border-light);
    color: var(--ug-text-muted);
    cursor: not-allowed;
    transform: none;
}

/* -------------------------
   Button - Outline Variant
   ------------------------- */
.ug-btn--outline {
    background-color: transparent;
    border: 1px solid var(--ug-border);
    color: var(--ug-text-primary);
}

.ug-btn--outline:hover {
    background-color: var(--ug-canvas);
    border-color: var(--ug-border-hover);
}

.ug-btn--outline:active {
    background-color: var(--ug-canvas);
    transform: scale(0.98);
}

.ug-btn--outline:disabled,
.ug-btn--outline[disabled] {
    background-color: transparent;
    border-color: var(--ug-border-light);
    color: var(--ug-text-muted);
    cursor: not-allowed;
    transform: none;
}

/* -------------------------
   Button - Outline Accent Variant (Violet border)
   ------------------------- */
.ug-btn--outline-accent {
    background-color: transparent;
    border: 1px solid var(--ug-violet);
    color: var(--ug-violet);
}

.ug-btn--outline-accent:hover {
    background-color: var(--ug-violet-soft);
}

.ug-btn--outline-accent:active {
    background-color: var(--ug-violet-muted);
    transform: scale(0.98);
}

.ug-btn--outline-accent:disabled,
.ug-btn--outline-accent[disabled] {
    background-color: transparent;
    border-color: var(--ug-border-light);
    color: var(--ug-text-muted);
    cursor: not-allowed;
    transform: none;
}

/* -------------------------
   Button - Icon Button
   ------------------------- */
.ug-btn--icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--ug-text-secondary);
}

.ug-btn--icon:hover {
    background-color: var(--ug-canvas);
    color: var(--ug-text-primary);
}

/* -------------------------
   Button Sizes
   ------------------------- */
.ug-btn--sm {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
    min-height: 36px;
}

.ug-btn--lg {
    font-size: var(--text-md);
    padding: var(--space-4) var(--space-6);
    min-height: 52px;
}

/* -------------------------
   Button with Icon
   ------------------------- */
.ug-btn__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.ug-btn--lg .ug-btn__icon {
    width: 20px;
    height: 20px;
}

/* Arrow icon animation */
.ug-btn:hover .ug-btn__icon--arrow {
    transform: translateX(4px);
}

/* -------------------------
   Button - Full Width
   ------------------------- */
.ug-btn--full {
    width: 100%;
}

/* -------------------------
   Button - Loading State
   ------------------------- */
.ug-btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.ug-btn--loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ug-spin 0.6s linear infinite;
}

.ug-btn--primary.ug-btn--loading::after {
    border-color: var(--ug-text-inverse);
    border-right-color: transparent;
}

@keyframes ug-spin {
    to { transform: rotate(360deg); }
}


/* ==========================================================================
   FORM INPUT COMPONENTS
   ========================================================================== */

/**
 * Base Input Styles
 */
.ug-input {
    display: block;
    width: 100%;

    /* Typography */
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--ug-text-primary);

    /* Sizing */
    padding: var(--space-3) var(--space-4);
    min-height: 44px;

    /* Appearance - V2: Rounded, soft borders */
    background-color: var(--ug-card);
    border: 1px solid var(--ug-border);
    border-radius: var(--radius-md);

    /* Transitions */
    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background-color var(--transition-base);
}

.ug-input::placeholder {
    color: var(--ug-text-tertiary);
}

/* Focus State - V2: Violet ring */
.ug-input:focus {
    outline: none;
    border-color: var(--ug-violet);
    box-shadow: 0 0 0 3px var(--ug-violet-soft);
}

/* Hover State (when not focused) */
.ug-input:hover:not(:focus):not(:disabled):not(.ug-input--error) {
    border-color: var(--ug-border-hover);
}

/* Error State */
.ug-input--error {
    border-color: var(--ug-error);
    background-color: var(--ug-error-soft);
}

.ug-input--error:focus {
    border-color: var(--ug-error);
    box-shadow: 0 0 0 3px var(--ug-error-soft);
}

/* Success State */
.ug-input--success {
    border-color: var(--ug-success);
}

.ug-input--success:focus {
    border-color: var(--ug-success);
    box-shadow: 0 0 0 3px var(--ug-success-soft);
}

/* Disabled State */
.ug-input:disabled {
    background-color: var(--ug-canvas);
    border-color: var(--ug-border-light);
    color: var(--ug-text-disabled);
    cursor: not-allowed;
}

/* -------------------------
   Input Sizes
   ------------------------- */
.ug-input--sm {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    min-height: 36px;
}

.ug-input--lg {
    font-size: var(--text-md);
    padding: var(--space-4) var(--space-5);
    min-height: 52px;
}

/* -------------------------
   Textarea
   ------------------------- */
.ug-textarea {
    min-height: 120px;
    resize: vertical;
}

/* -------------------------
   Select
   ------------------------- */
.ug-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
}

.ug-select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* -------------------------
   Form Field Container
   ------------------------- */
.ug-field {
    margin-bottom: var(--space-5);
}

/* -------------------------
   Form Label
   ------------------------- */
.ug-label {
    display: block;
    margin-bottom: var(--space-2);

    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--ug-text-primary);
    line-height: var(--leading-snug);
}

.ug-label--required::after {
    content: ' *';
    color: var(--ug-error);
}

/* -------------------------
   Helper Text
   ------------------------- */
.ug-helper {
    display: block;
    margin-top: var(--space-1);

    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--ug-text-secondary);
    line-height: var(--leading-normal);
}

/* -------------------------
   Error Message
   ------------------------- */
.ug-error-message {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);

    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--ug-error);
    line-height: var(--leading-snug);
}

.ug-error-message::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
}

/* -------------------------
   Input with Icon
   ------------------------- */
.ug-input-wrapper {
    position: relative;
}

.ug-input-wrapper .ug-input {
    padding-left: 44px;
}

.ug-input-wrapper .ug-input-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--ug-text-tertiary);
    pointer-events: none;
}

.ug-input-wrapper .ug-input:focus + .ug-input-icon,
.ug-input-wrapper .ug-input:focus ~ .ug-input-icon {
    color: var(--ug-violet);
}


/* ==========================================================================
   TOAST NOTIFICATION COMPONENT
   ========================================================================== */

/**
 * Toast Container
 * Holds all toast notifications
 */
.ug-toast-container {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-toast);

    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    max-width: 400px;
    width: calc(100% - var(--space-10));

    pointer-events: none;
}

/* Mobile positioning - bottom of screen */
@media (max-width: 479px) {
    .ug-toast-container {
        top: auto;
        bottom: var(--space-5);
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
    }
}

/**
 * Individual Toast - V2: Rounded, soft shadows
 */
.ug-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);

    padding: var(--space-4);

    background-color: var(--ug-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--ug-border);

    pointer-events: auto;

    /* Animation */
    animation: ug-toast-in 0.3s ease forwards;
}

.ug-toast--exiting {
    animation: ug-toast-out 0.2s ease forwards;
}

@keyframes ug-toast-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ug-toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Mobile animation - from bottom */
@media (max-width: 479px) {
    @keyframes ug-toast-in {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes ug-toast-out {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(100%);
        }
    }
}

/* -------------------------
   Toast Icon
   ------------------------- */
.ug-toast__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* -------------------------
   Toast Content
   ------------------------- */
.ug-toast__content {
    flex: 1;
    min-width: 0;
}

.ug-toast__title {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--ug-text-primary);
    line-height: var(--leading-snug);
    margin: 0 0 var(--space-1) 0;
}

.ug-toast__message {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--ug-text-secondary);
    line-height: var(--leading-normal);
    margin: 0;
}

/* -------------------------
   Toast Close Button
   ------------------------- */
.ug-toast__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    padding: 0;
    margin: calc(var(--space-1) * -1);

    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--ug-text-tertiary);
    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.ug-toast__close:hover {
    background-color: var(--ug-canvas);
    color: var(--ug-text-primary);
}

.ug-toast__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ug-violet-soft);
}

.ug-toast__close svg {
    width: 14px;
    height: 14px;
}

/* -------------------------
   Toast Variants
   ------------------------- */

/* Success Toast */
.ug-toast--success {
    border-left-color: var(--ug-success);
}

.ug-toast--success .ug-toast__icon {
    color: var(--ug-success-text);
}

/* Error Toast */
.ug-toast--error {
    border-left-color: var(--ug-error);
}

.ug-toast--error .ug-toast__icon {
    color: var(--ug-error-text);
}

/* Warning Toast */
.ug-toast--warning {
    border-left-color: var(--ug-warning);
}

.ug-toast--warning .ug-toast__icon {
    color: var(--ug-warning-text);
}

/* Info Toast */
.ug-toast--info {
    border-left-color: var(--ug-info);
}

.ug-toast--info .ug-toast__icon {
    color: var(--ug-info-text);
}

/* -------------------------
   Toast Progress Bar (optional)
   ------------------------- */
.ug-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--ug-border);
    border-radius: 0 0 0 var(--radius-lg);
    animation: ug-toast-progress 5s linear forwards;
}

.ug-toast--success .ug-toast__progress {
    background-color: var(--ug-success);
}

.ug-toast--error .ug-toast__progress {
    background-color: var(--ug-error);
}

.ug-toast--warning .ug-toast__progress {
    background-color: var(--ug-warning);
}

.ug-toast--info .ug-toast__progress {
    background-color: var(--ug-info);
}

@keyframes ug-toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}


/* ==========================================================================
   BADGE COMPONENTS
   ========================================================================== */

.ug-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-none);
}

.ug-badge--violet {
    background-color: var(--ug-violet-soft);
    color: var(--ug-violet);
}

.ug-badge--mint {
    background-color: var(--ug-mint-soft);
    color: var(--ug-success-text);
}

.ug-badge--coral {
    background-color: var(--ug-coral-soft);
    color: #E11D48;
}

.ug-badge--peach {
    background-color: var(--ug-peach-soft);
    color: var(--ug-warning-text);
}

.ug-badge--sky {
    background-color: var(--ug-sky-soft);
    color: var(--ug-info-text);
}

.ug-badge--neutral {
    background-color: var(--ug-canvas);
    color: var(--ug-text-secondary);
}


/* ==========================================================================
   CARD COMPONENTS
   ========================================================================== */

.ug-card {
    background: var(--ug-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.ug-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* Card with subtle border (alternative style) */
.ug-card--bordered {
    background: var(--ug-card);
    border: 1px solid var(--ug-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: none;
}

/* Colored accent cards */
.ug-card--violet {
    background: linear-gradient(135deg, #EDE9FE 0%, #F5F3FF 100%);
    border: 1px solid var(--ug-violet-muted);
}

.ug-card--mint {
    background: linear-gradient(135deg, #D1FAE5 0%, #ECFDF5 100%);
    border: 1px solid #A7F3D0;
}

.ug-card--coral {
    background: linear-gradient(135deg, #FFE4E6 0%, #FFF1F2 100%);
    border: 1px solid #FECDD3;
}

.ug-card--peach {
    background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
    border: 1px solid #FDE68A;
}


/* ==========================================================================
   TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

.text-page-title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ug-text-primary);
}

.text-section-title {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--ug-text-primary);
}

.text-card-title {
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 1.4;
    color: var(--ug-text-primary);
}

.text-body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--ug-text-secondary);
}

.text-caption {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1.4;
    color: var(--ug-text-tertiary);
}

.text-label {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ug-text-tertiary);
}


/* ==========================================================================
   ACCESSIBILITY - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ug-btn,
    .ug-input,
    .ug-toast,
    .ug-card {
        transition: none;
    }

    .ug-toast {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .ug-toast--exiting {
        animation: none;
        opacity: 0;
    }

    .ug-btn--loading::after {
        animation: none;
    }

    .ug-toast__progress {
        animation: none;
        width: 0;
    }
}