/**
 * UI SYSTEM - Like Boom Design System
 * Based on Figma design rules
 */

:root {
    /* ==========================================
       TYPOGRAPHY - FONT FAMILIES
       ========================================== */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ==========================================
       TYPOGRAPHY - HEADINGS
       font-family: Inter
       font-weight: Bold (700)
       line-height: 100%
       letter-spacing: -3%
       ========================================== */

    /* Heading 1 */
    --heading-1-size: 48px;
    --heading-1-size-mobile: 32px;
    --heading-1-weight: 700;
    --heading-1-line-height: 1em;
    --heading-1-letter-spacing: -0.03em;

    /* Heading 2 */
    --heading-2-size: 40px;
    --heading-2-size-mobile: 28px;
    --heading-2-weight: 700;
    --heading-2-line-height: 1em;
    --heading-2-letter-spacing: -0.03em;

    /* Heading 3 */
    --heading-3-size: 32px;
    --heading-3-size-mobile: 24px;
    --heading-3-weight: 700;
    --heading-3-line-height: 1em;
    --heading-3-letter-spacing: -0.03em;

    /* Heading 4 */
    --heading-4-size: 28px;
    --heading-4-size-mobile: 20px;
    --heading-4-weight: 700;
    --heading-4-line-height: 1em;
    --heading-4-letter-spacing: -0.03em;

    /* Heading 5 */
    --heading-5-size: 24px;
    --heading-5-size-mobile: 18px;
    --heading-5-weight: 700;
    --heading-5-line-height: 1em;
    --heading-5-letter-spacing: -0.03em;

    /* Heading 6 */
    --heading-6-size: 20px;
    --heading-6-size-mobile: 16px;
    --heading-6-weight: 700;
    --heading-6-line-height: 1em;
    --heading-6-letter-spacing: -0.03em;

    /* ==========================================
       TYPOGRAPHY - TEXT
       font-family: Inter
       font-weight: regular (400)
       line-height: auto
       letter-spacing: 0%
       ========================================== */

    /* Text Large */
    --text-lg-size: 18px;
    --text-lg-size-mobile: 16px;
    --text-lg-weight: 400;
    --text-lg-line-height: 1.21em;

    /* Text Medium */
    --text-md-size: 16px;
    --text-md-size-mobile: 14px;
    --text-md-weight: 400;
    --text-md-line-height: 1.21em;

    /* Text Small */
    --text-sm-size: 14px;
    --text-sm-size-mobile: 12px;
    --text-sm-weight: 400;
    --text-sm-line-height: 1.21em;

    /* Text Extra Small */
    --text-xs-size: 12px;
    --text-xs-size-mobile: 10px;
    --text-xs-weight: 400;
    --text-xs-line-height: 1.21em;

    /* ==========================================
       TYPOGRAPHY - MEDIUM (500 weight)
       ========================================== */

    /* Medium Large */
    --medium-lg-size: 18px;
    --medium-lg-size-mobile: 16px;
    --medium-lg-weight: 500;
    --medium-lg-line-height: 1.21em;

    /* Medium Medium */
    --medium-md-size: 16px;
    --medium-md-size-mobile: 14px;
    --medium-md-weight: 500;
    --medium-md-line-height: 1.21em;

    /* Medium Small */
    --medium-sm-size: 14px;
    --medium-sm-size-mobile: 12px;
    --medium-sm-weight: 500;
    --medium-sm-line-height: 1.21em;

    /* Medium Extra Small */
    --medium-xs-size: 12px;
    --medium-xs-size-mobile: 10px;
    --medium-xs-weight: 500;
    --medium-xs-line-height: 1.21em;

    /* ==========================================
       SPACING
       Desktop / Mobile
       ========================================== */

    --spacing-none: 0px;
    --spacing-none-mobile: 0px;

    --spacing-xxxxs: 2px;
    --spacing-xxxxs-mobile: 0px;

    --spacing-xxxs: 4px;
    --spacing-xxxs-mobile: 2px;

    --spacing-xxs: 8px;
    --spacing-xxs-mobile: 4px;

    --spacing-xs: 12px;
    --spacing-xs-mobile: 10px;

    --spacing-sm: 16px;
    --spacing-sm-mobile: 14px;

    --spacing-md: 20px;
    --spacing-md-mobile: 16px;

    --spacing-lg: 24px;
    --spacing-lg-mobile: 18px;

    --spacing-xl: 28px;
    --spacing-xl-mobile: 20px;

    --spacing-xxl: 32px;
    --spacing-xxl-mobile: 24px;

    --spacing-xxxl: 40px;
    --spacing-xxxl-mobile: 28px;

    /* ==========================================
       BORDER RADIUS
       Desktop / Mobile
       ========================================== */

    --radius-xxs: 10px;
    --radius-xxs-mobile: 8px;

    --radius-xs: 12px;
    --radius-xs-mobile: 10px;

    --radius-s: 16px;
    --radius-s-mobile: 14px;

    --radius-md: 20px;
    --radius-md-mobile: 18px;

    --radius-lg: 24px;
    --radius-lg-mobile: 20px;

    --radius-xl: 32px;
    --radius-xl-mobile: 28px;

    --radius-max: 999px;

    /* ==========================================
       COLORS
       ========================================== */

    /* Background Colors */
    --color-bg-default: #FFFFFF;
    --color-bg-page: #F5F5F8;
    --color-surface: #F4F5F7;
    --color-on-color: #FFFFFF;

    /* Border & Text Colors */
    --color-borders: #D4D4D4;
    --color-medium: #737373;
    --color-default: #2C2D2E;

    /* Primary Colors */
    --color-primary: #005FF9;
    --color-primary-hover: #1473FF;
    --color-primary-sub: rgba(0, 95, 249, 0.1);

    /* Success Colors */
    --color-success: #0DC268;
    --color-success-light: #DBF6E8;

    /* Warning Colors */
    --color-warning: #FF9E00;
    --color-warning-light: #FFF5E5;

    /* Error Colors */
    --color-error: #ED0A34;
    --color-error-light: #FDE6EB;

    /* ==========================================
       EFFECTS (Shadows)
       ========================================== */

    --shadow-elevation-40-8-8: 0px 8px 40px 0px rgba(0, 0, 0, 0.08);

    /* ==========================================
       COMPONENT TOKENS
       ========================================== */

    /* Buttons */
    --ui-btn-radius: var(--radius-max);
    --ui-btn-gap: 10px;
    --ui-btn-height-lg: 64px;
    --ui-btn-height-md: 54px;
    --ui-btn-height-sm: 42px;
    --ui-btn-height-xs: 36px;
    --ui-btn-padding-x-lg: 28px;
    --ui-btn-padding-x-md: 24px;
    --ui-btn-padding-x-sm: 20px;
    --ui-btn-padding-x-xs: 16px;

    /* Inputs */
    --ui-input-radius: var(--radius-xs);
    --ui-input-height-lg: 64px;
    --ui-input-height-sm: 56px;
    --ui-input-padding-x: 16px;
    --ui-input-border-width: 1px;
    --ui-input-bg: var(--color-surface);
}

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

/* Headings */
.heading-1 {
    font-family: var(--font-family-base);
    font-size: var(--heading-1-size);
    font-weight: var(--heading-1-weight);
    line-height: var(--heading-1-line-height);
    letter-spacing: var(--heading-1-letter-spacing);
}

.heading-2 {
    font-family: var(--font-family-base);
    font-size: var(--heading-2-size);
    font-weight: var(--heading-2-weight);
    line-height: var(--heading-2-line-height);
    letter-spacing: var(--heading-2-letter-spacing);
}

.heading-3 {
    font-family: var(--font-family-base);
    font-size: var(--heading-3-size);
    font-weight: var(--heading-3-weight);
    line-height: var(--heading-3-line-height);
    letter-spacing: var(--heading-3-letter-spacing);
}

.heading-4 {
    font-family: var(--font-family-base);
    font-size: var(--heading-4-size);
    font-weight: var(--heading-4-weight);
    line-height: var(--heading-4-line-height);
    letter-spacing: var(--heading-4-letter-spacing);
}

.heading-5 {
    font-family: var(--font-family-base);
    font-size: var(--heading-5-size);
    font-weight: var(--heading-5-weight);
    line-height: var(--heading-5-line-height);
    letter-spacing: var(--heading-5-letter-spacing);
}

.heading-6 {
    font-family: var(--font-family-base);
    font-size: var(--heading-6-size);
    font-weight: var(--heading-6-weight);
    line-height: var(--heading-6-line-height);
    letter-spacing: var(--heading-6-letter-spacing);
}

/* Text Styles */
.text-lg {
    font-family: var(--font-family-base);
    font-size: var(--text-lg-size);
    font-weight: var(--text-lg-weight);
    line-height: var(--text-lg-line-height);
}

.text-md {
    font-family: var(--font-family-base);
    font-size: var(--text-md-size);
    font-weight: var(--text-md-weight);
    line-height: var(--text-md-line-height);
}

.text-sm {
    font-family: var(--font-family-base);
    font-size: var(--text-sm-size);
    font-weight: var(--text-sm-weight);
    line-height: var(--text-sm-line-height);
}

.text-xs {
    font-family: var(--font-family-base);
    font-size: var(--text-xs-size);
    font-weight: var(--text-xs-weight);
    line-height: var(--text-xs-line-height);
}

/* Medium Styles */
.medium-lg {
    font-family: var(--font-family-base);
    font-size: var(--medium-lg-size);
    font-weight: var(--medium-lg-weight);
    line-height: var(--medium-lg-line-height);
}

.medium-md {
    font-family: var(--font-family-base);
    font-size: var(--medium-md-size);
    font-weight: var(--medium-md-weight);
    line-height: var(--medium-md-line-height);
}

.medium-sm {
    font-family: var(--font-family-base);
    font-size: var(--medium-sm-size);
    font-weight: var(--medium-sm-weight);
    line-height: var(--medium-sm-line-height);
}

.medium-xs {
    font-family: var(--font-family-base);
    font-size: var(--medium-xs-size);
    font-weight: var(--medium-xs-weight);
    line-height: var(--medium-xs-line-height);
}

/* ==========================================
   UTILITY CLASSES - COLORS
   ========================================== */

/* Background Colors */
.bg-default { background-color: var(--color-bg-default); }
.bg-surface { background-color: var(--color-surface); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-sub { background-color: var(--color-primary-sub); }
.bg-success { background-color: var(--color-success); }
.bg-success-light { background-color: var(--color-success-light); }
.bg-warning { background-color: var(--color-warning); }
.bg-warning-light { background-color: var(--color-warning-light); }
.bg-error { background-color: var(--color-error); }
.bg-error-light { background-color: var(--color-error-light); }

/* Text Colors */
.text-default { color: var(--color-default); }
.text-medium { color: var(--color-medium); }
.text-on-color { color: var(--color-on-color); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

/* Border Colors */
.border-default { border-color: var(--color-borders); }
.border-primary { border-color: var(--color-primary); }
.border-success { border-color: var(--color-success); }
.border-warning { border-color: var(--color-warning); }
.border-error { border-color: var(--color-error); }

/* ==========================================
   MOBILE RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    /* Headings Mobile */
    .heading-1 { font-size: var(--heading-1-size-mobile); }
    .heading-2 { font-size: var(--heading-2-size-mobile); }
    .heading-3 { font-size: var(--heading-3-size-mobile); }
    .heading-4 { font-size: var(--heading-4-size-mobile); }
    .heading-5 { font-size: var(--heading-5-size-mobile); }
    .heading-6 { font-size: var(--heading-6-size-mobile); }

    /* Text Mobile */
    .text-lg { font-size: var(--text-lg-size-mobile); }
    .text-md { font-size: var(--text-md-size-mobile); }
    .text-sm { font-size: var(--text-sm-size-mobile); }
    .text-xs { font-size: var(--text-xs-size-mobile); }

    /* Medium Mobile */
    .medium-lg { font-size: var(--medium-lg-size-mobile); }
    .medium-md { font-size: var(--medium-md-size-mobile); }
    .medium-sm { font-size: var(--medium-sm-size-mobile); }
    .medium-xs { font-size: var(--medium-xs-size-mobile); }

    /* Spacing Mobile - Auto-update via CSS variables */
    :root {
        --spacing-xxxxs: var(--spacing-xxxxs-mobile);
        --spacing-xxxs: var(--spacing-xxxs-mobile);
        --spacing-xxs: var(--spacing-xxs-mobile);
        --spacing-xs: var(--spacing-xs-mobile);
        --spacing-sm: var(--spacing-sm-mobile);
        --spacing-md: var(--spacing-md-mobile);
        --spacing-lg: var(--spacing-lg-mobile);
        --spacing-xl: var(--spacing-xl-mobile);
        --spacing-xxl: var(--spacing-xxl-mobile);
        --spacing-xxxl: var(--spacing-xxxl-mobile);

        /* Radius Mobile */
        --radius-xxs: var(--radius-xxs-mobile);
        --radius-xs: var(--radius-xs-mobile);
        --radius-s: var(--radius-s-mobile);
        --radius-md: var(--radius-md-mobile);
        --radius-lg: var(--radius-lg-mobile);
        --radius-xl: var(--radius-xl-mobile);

        /* Component tokens - Mobile */
        --ui-btn-height-lg: 48px;
        --ui-btn-height-md: 42px;
        --ui-input-height-lg: 56px;
        --ui-input-height-sm: 48px;
    }
}

/* ==========================================
   UTILITY CLASSES - SPACING
   ========================================== */

/* Padding */
.p-none { padding: var(--spacing-none); }
.p-xxxxs { padding: var(--spacing-xxxxs); }
.p-xxxs { padding: var(--spacing-xxxs); }
.p-xxs { padding: var(--spacing-xxs); }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-xxl { padding: var(--spacing-xxl); }
.p-xxxl { padding: var(--spacing-xxxl); }

/* Margin */
.m-none { margin: var(--spacing-none); }
.m-xxxxs { margin: var(--spacing-xxxxs); }
.m-xxxs { margin: var(--spacing-xxxs); }
.m-xxs { margin: var(--spacing-xxs); }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-xxl { margin: var(--spacing-xxl); }
.m-xxxl { margin: var(--spacing-xxxl); }

/* Gap */
.gap-none { gap: var(--spacing-none); }
.gap-xxxxs { gap: var(--spacing-xxxxs); }
.gap-xxxs { gap: var(--spacing-xxxs); }
.gap-xxs { gap: var(--spacing-xxs); }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-xxl { gap: var(--spacing-xxl); }
.gap-xxxl { gap: var(--spacing-xxxl); }

/* ==========================================
   UTILITY CLASSES - BORDER RADIUS
   ========================================== */

.radius-xxs { border-radius: var(--radius-xxs); }
.radius-xs { border-radius: var(--radius-xs); }
.radius-s { border-radius: var(--radius-s); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-max { border-radius: var(--radius-max); }

/* ==========================================
   COMPONENTS - BUTTON
   Use `.ui-btn` to avoid Bootstrap collisions.
   ========================================== */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-btn-gap);
    border-radius: var(--ui-btn-radius);
    border: none;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    font-family: var(--font-family-base);
    font-weight: var(--medium-md-weight);
    font-size: var(--medium-md-size);
    line-height: var(--medium-md-line-height);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ui-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 95, 249, 0.15);
}

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.ui-btn--lg {
    height: var(--ui-btn-height-lg);
    padding: 0 var(--ui-btn-padding-x-lg);
}

.ui-btn--md {
    height: var(--ui-btn-height-md);
    padding: 0 var(--ui-btn-padding-x-md);
    font-size: var(--medium-md-size);
    line-height: var(--medium-md-line-height);
}

.ui-btn--sm {
    height: var(--ui-btn-height-sm);
    padding: 0 var(--ui-btn-padding-x-sm);
    font-size: var(--medium-sm-size);
    line-height: var(--medium-sm-line-height);
}

.ui-btn--xs {
    height: var(--ui-btn-height-xs);
    padding: 0 var(--ui-btn-padding-x-xs);
    font-size: var(--medium-xs-size);
    line-height: var(--medium-xs-line-height);
}

.ui-btn--filled {
    background: var(--color-primary);
    color: var(--color-on-color);
}

.ui-btn--filled:hover {
    background: var(--color-primary-hover);
}

.ui-btn--border-primary {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.ui-btn--border-primary:hover {
    background: var(--color-primary-sub);
}

.ui-btn--border-grey {
    background: transparent;
    border: 1px solid var(--color-borders);
    color: var(--color-default);
}

.ui-btn--border-grey:hover {
    background: var(--color-surface);
}

.ui-btn--filled-sub {
    background: var(--color-primary-sub);
    color: var(--color-primary);
}

.ui-btn--filled-sub:hover {
    background: rgba(0, 95, 249, 0.16);
}

.ui-btn--grey {
    background: var(--color-surface);
    color: var(--color-default);
}

.ui-btn--grey:hover {
    background: rgba(0, 0, 0, 0.04);
}

.ui-btn--icon {
    padding: 0;
    width: var(--ui-btn-height-sm);
}

.ui-btn--icon.ui-btn--xs { width: var(--ui-btn-height-xs); }
.ui-btn--icon.ui-btn--sm { width: var(--ui-btn-height-sm); }
.ui-btn--icon.ui-btn--md { width: var(--ui-btn-height-md); }
.ui-btn--icon.ui-btn--lg { width: var(--ui-btn-height-lg); }

/* ==========================================
   COMPONENTS - INPUT
   ========================================== */

input.ui-input,
textarea.ui-input,
select.ui-input {
    width: 100%;
    height: var(--ui-input-height-lg);
    padding: 0 var(--ui-input-padding-x);
    border-radius: var(--ui-input-radius);
    border: var(--ui-input-border-width) solid var(--color-borders);
    background: var(--ui-input-bg);
    color: var(--color-default);
    font-family: var(--font-family-base);
    font-size: var(--text-md-size);
    line-height: var(--text-md-line-height);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.ui-input {
    height: auto;
    padding: 12px var(--ui-input-padding-x);
    resize: vertical;
}

select.ui-input {
    -webkit-appearance: none;
    appearance: none;
}

input.ui-input::placeholder,
textarea.ui-input::placeholder {
    color: var(--color-medium);
}

input.ui-input:focus,
textarea.ui-input:focus,
select.ui-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 95, 249, 0.12);
}

input.ui-input--sm,
select.ui-input--sm {
    height: var(--ui-input-height-sm);
}