/*
 * =========================================================
 * BAMASAZ Platform
 * Core Design System
 *
 * Module: Core/DesignSystem
 * Identifier: CSS-01
 * Version: 1.0.0
 * Status: Stable
 * Deployment: WoodMart Child Theme
 *
 * Path:
 * assets/css/bamasaz/core.css
 * =========================================================
 */

/* ---------------------------------------------------------
 * 1. Design Tokens
 * --------------------------------------------------------- */

:root {
    --bms-color-primary: #1f4f46;
    --bms-color-primary-hover: #173d36;
    --bms-color-secondary: #c49a48;

    --bms-color-text: #263238;
    --bms-color-text-muted: #68747a;
    --bms-color-border: #dfe5e7;
    --bms-color-surface: #ffffff;
    --bms-color-background: #f5f7f7;

    --bms-color-success: #237a4b;
    --bms-color-success-bg: #edf8f2;

    --bms-color-warning: #9a6500;
    --bms-color-warning-bg: #fff8e7;

    --bms-color-danger: #b3261e;
    --bms-color-danger-bg: #fff0ef;

    --bms-radius-sm: 6px;
    --bms-radius-md: 10px;
    --bms-radius-lg: 16px;

    --bms-space-xs: 4px;
    --bms-space-sm: 8px;
    --bms-space-md: 16px;
    --bms-space-lg: 24px;
    --bms-space-xl: 32px;

    --bms-font-sm: 13px;
    --bms-font-md: 15px;
    --bms-font-lg: 18px;
    --bms-font-xl: 24px;

    --bms-shadow-sm: 0 2px 8px rgba(20, 40, 45, 0.06);
    --bms-shadow-md: 0 8px 24px rgba(20, 40, 45, 0.10);

    --bms-transition: 180ms ease;
}

/* ---------------------------------------------------------
 * 2. Component Scope
 * --------------------------------------------------------- */

.bms-design-test {
    direction: rtl;
    width: 100%;
    max-width: 960px;
    margin: 40px auto;
    padding: var(--bms-space-xl);
    background: var(--bms-color-background);
    border-radius: var(--bms-radius-lg);
    color: var(--bms-color-text);
    box-sizing: border-box;
}

.bms-design-test *,
.bms-design-test *::before,
.bms-design-test *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
 * 3. Typography
 * --------------------------------------------------------- */

.bms-title {
    margin: 0 0 var(--bms-space-sm);
    color: var(--bms-color-text);
    font-size: var(--bms-font-xl);
    font-weight: 700;
    line-height: 1.7;
}

.bms-description {
    margin: 0;
    color: var(--bms-color-text-muted);
    font-size: var(--bms-font-md);
    line-height: 2;
}

/* ---------------------------------------------------------
 * 4. Cards
 * --------------------------------------------------------- */

.bms-card {
    margin-top: var(--bms-space-lg);
    padding: var(--bms-space-lg);
    background: var(--bms-color-surface);
    border: 1px solid var(--bms-color-border);
    border-radius: var(--bms-radius-md);
    box-shadow: var(--bms-shadow-sm);
}

.bms-card__title {
    margin: 0 0 var(--bms-space-sm);
    color: var(--bms-color-text);
    font-size: var(--bms-font-lg);
    font-weight: 700;
}

.bms-card__text {
    margin: 0;
    color: var(--bms-color-text-muted);
    font-size: var(--bms-font-md);
    line-height: 2;
}

/* ---------------------------------------------------------
 * 5. Buttons
 * --------------------------------------------------------- */

.bms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bms-space-sm);
    margin-top: var(--bms-space-lg);
}

.bms-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--bms-radius-sm);
    font-size: var(--bms-font-md);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--bms-transition),
        border-color var(--bms-transition),
        color var(--bms-transition),
        box-shadow var(--bms-transition),
        transform var(--bms-transition);
}

.bms-button:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.bms-button:focus-visible {
    outline: 3px solid rgba(31, 79, 70, 0.22);
    outline-offset: 2px;
}

.bms-button--primary {
    background: var(--bms-color-primary);
    border-color: var(--bms-color-primary);
    color: #ffffff;
}

.bms-button--primary:hover {
    background: var(--bms-color-primary-hover);
    border-color: var(--bms-color-primary-hover);
    color: #ffffff;
}

.bms-button--secondary {
    background: transparent;
    border-color: var(--bms-color-primary);
    color: var(--bms-color-primary);
}

.bms-button--secondary:hover {
    background: rgba(31, 79, 70, 0.06);
    color: var(--bms-color-primary-hover);
}

/* ---------------------------------------------------------
 * 6. Status Badges
 * --------------------------------------------------------- */

.bms-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bms-space-sm);
    margin-top: var(--bms-space-lg);
}

.bms-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--bms-font-sm);
    font-weight: 600;
    line-height: 1.5;
}

.bms-badge--pending {
    background: var(--bms-color-warning-bg);
    color: var(--bms-color-warning);
}

.bms-badge--approved {
    background: var(--bms-color-success-bg);
    color: var(--bms-color-success);
}

.bms-badge--rejected {
    background: var(--bms-color-danger-bg);
    color: var(--bms-color-danger);
}

/* ---------------------------------------------------------
 * 7. Messages
 * --------------------------------------------------------- */

.bms-message {
    position: relative;
    margin-top: var(--bms-space-md);
    padding: 14px 16px;
    border: 1px solid transparent;
    border-right-width: 4px;
    border-radius: var(--bms-radius-sm);
    font-size: var(--bms-font-md);
    line-height: 1.9;
}

.bms-message--success {
    background: var(--bms-color-success-bg);
    border-color: #b9dfc9;
    border-right-color: var(--bms-color-success);
    color: var(--bms-color-success);
}

.bms-message--warning {
    background: var(--bms-color-warning-bg);
    border-color: #f0d89f;
    border-right-color: var(--bms-color-warning);
    color: var(--bms-color-warning);
}

.bms-message--danger {
    background: var(--bms-color-danger-bg);
    border-color: #efc0bd;
    border-right-color: var(--bms-color-danger);
    color: var(--bms-color-danger);
}

/* ---------------------------------------------------------
 * 8. Accessibility
 * --------------------------------------------------------- */

.bms-button[aria-disabled="true"],
.bms-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

/* ---------------------------------------------------------
 * 9. Responsive
 * --------------------------------------------------------- */

@media (max-width: 767px) {
    .bms-design-test {
        margin: 20px auto;
        padding: var(--bms-space-md);
        border-radius: var(--bms-radius-md);
    }

    .bms-title {
        font-size: 20px;
    }

    .bms-card {
        padding: var(--bms-space-md);
    }

    .bms-actions {
        flex-direction: column;
    }

    .bms-button {
        width: 100%;
    }
}