:root {
    /* Color System - Derived from Logo #714B67 */
    --primary-50: #f4f0f3;
    --primary-100: #e5dbe3;
    --primary-200: #ceb9ca;
    --primary-300: #b494b0;
    --primary-400: #9a7396;
    --primary-500: #714b67;
    /* Base Brand Color */
    --primary-600: #623e59;
    --primary-700: #52324b;
    --primary-800: #43283d;
    --primary-900: #351f30;

    --accent-500: #8e44ad;
    /* Gradient Secondary */

    /* Neutrals */
    --neutral-0: #ffffff;
    --neutral-50: #f8f9fa;
    --neutral-100: #f1f3f5;
    --neutral-200: #e9ecef;
    --neutral-300: #dee2e6;
    --neutral-400: #ced4da;
    --neutral-500: #adb5bd;
    --neutral-600: #6c757d;
    --neutral-700: #495057;
    --neutral-800: #343a40;
    --neutral-900: #212529;

    /* Semantic */
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;

    /* Typography Scale */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --display-sm: 24px;
    --display-md: 32px;
    --display-lg: 40px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Radius */
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 12px;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Component Classes mapping to Tokens */
.wuds-btn-primary {
    background: linear-gradient(90deg, var(--primary-500) 0%, var(--accent-500) 100%);
    color: var(--neutral-0);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-sm);
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 10px rgba(113, 75, 103, 0.2);
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.5px;
}

.wuds-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(113, 75, 103, 0.3);
    color: var(--neutral-0);
}

.wuds-text-muted {
    color: var(--neutral-600);
}

.wuds-text-dark {
    color: var(--neutral-900);
}

.wuds-bg-light {
    background-color: var(--neutral-0);
}

.wuds-border-bottom {
    border-bottom: 1px solid var(--neutral-100);
}

/* Header Specific */
.wuds-header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-header);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 60px;
}

.wuds-mobile-header {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mobile Scrollbar Hide */
.wuds-no-scrollbar::-webkit-scrollbar {
    display: none;
}

.wuds-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}