/*
============================================================
Project : Sutpinan Logistics Tracking
File    : design-system.css
Purpose : Reusable Design System classes
Author  : SutpinanSoft
Version : 2.0.0
============================================================
*/

/* ============================================================
   PRIMARY / BRAND
============================================================ */

.st-primary-text {
    color: var(--st-primary) !important;
}

.st-primary-hover:hover {
    color: var(--st-primary) !important;
}

.st-primary-bg {
    background: var(--st-primary) !important;
}

.st-primary-soft {
    background: var(--st-primary-light) !important;
}

.st-primary-gradient {
    background: linear-gradient(135deg, var(--st-primary), var(--st-accent)) !important;
}

.st-primary-border {
    border-color: var(--st-primary) !important;
}

.st-primary-ring {
    --tw-ring-color: var(--st-primary-soft) !important;
}

.st-primary-badge {
    background: var(--st-primary-light) !important;
    color: var(--st-primary) !important;
}

.st-primary-button {
    background: var(--st-primary) !important;
    color: white !important;
}

.st-primary-button:hover {
    background: var(--st-primary-dark) !important;
}


/* ============================================================
   SUCCESS
============================================================ */

.st-success-text {
    color: #059669 !important;
}

.st-success-bg {
    background: #ecfdf5 !important;
}

.st-success-border {
    border-color: #a7f3d0 !important;
}

.st-success-card {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}


/* ============================================================
   WARNING
============================================================ */

.st-warning-text {
    color: #d97706 !important;
}

.st-warning-bg {
    background: #fffbeb !important;
}

.st-warning-border {
    border-color: #fde68a !important;
}


/* ============================================================
   DANGER
============================================================ */

.st-danger-text {
    color: #dc2626 !important;
}

.st-danger-bg {
    background: #fef2f2 !important;
}

.st-danger-border {
    border-color: #fecaca !important;
}


/* ============================================================
   SURFACE
============================================================ */

.st-surface-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

.st-surface-soft {
    background: #f8fafc !important;
}

.st-muted-text {
    color: #64748b !important;
}