/*
============================================================
Project : Sutpinan Logistics Tracking
Module  : Design Tokens
Purpose : Global UI foundation for SutpinanSoft projects
Author  : SutpinanSoft
Version : 1.0.0
============================================================
*/

/* =========================
   DESIGN TOKENS
========================= */

:root {
    --st-color-primary: var(--st-primary);
    --st-color-primary-dark: var(--st-primary-dark);

    --st-color-navy: #0f172a;
    --st-color-bg: #f8fafc;
    --st-color-card: #ffffff;
    --st-color-border: #e2e8f0;

    --st-radius-sm: 12px;
    --st-radius-md: 18px;
    --st-radius-lg: 24px;
    --st-radius-xl: 32px;

    --st-shadow-soft: 0 20px 60px rgba(15, 23, 42, 0.08);
    --st-shadow-premium: 0 30px 90px rgba(15, 23, 42, 0.14);

    --st-transition-fast: 180ms ease;
    --st-transition-normal: 280ms ease;
    --st-transition-slow: 500ms ease;
}

.dark {
    --st-color-bg: #020617;
    --st-color-card: #0f172a;
    --st-color-border: #1e293b;
}

/* =========================
   GLOBAL
========================= */

* {
    box-sizing: border-box;
}

html {
    text-rendering: optimizeLegibility;
}

body {
    overflow-x: hidden;
}

/* =========================
   REUSABLE EFFECTS
========================= */

.st-card {
    border: 1px solid var(--st-color-border);
    border-radius: var(--st-radius-xl);
    background: var(--st-color-card);
    box-shadow: var(--st-shadow-soft);
    transition: transform var(--st-transition-normal),
        box-shadow var(--st-transition-normal),
        border-color var(--st-transition-normal);
}

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

.st-glow-primary {
    box-shadow: 0 0 0 6px rgba(214, 0, 0, 0.12),
                0 20px 50px rgba(214, 0, 0, 0.22);
}

.st-fade-up {
    animation: stFadeUp 0.65s ease both;
}

@keyframes stFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.st-soft-grid {
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 36px 36px;
}

/* =======================================================
   ST EMPTY STATE
======================================================= */

.st-empty {
    border: 1px dashed #dbe5f1;
    border-radius: 24px;

    padding: 70px 40px;

    background: #ffffff;

    text-align: center;

    transition: .3s;
}

.dark .st-empty {
    background: #0f172a;
    border-color: #334155;
}

.st-empty:hover {

    transform: translateY(-2px);

    box-shadow:
        0 20px 50px rgba(15, 23, 42, .08);

}

.st-empty-icon {

    font-size: 72px;

    margin-bottom: 24px;

}

.st-empty-title {

    font-size: 30px;

    font-weight: 800;

    color: #0f172a;

}

.dark .st-empty-title {

    color: white;

}

.st-empty-description {

    margin-top: 14px;

    color: #64748b;

    font-size: 16px;

    line-height: 1.8;

}