/*
|--------------------------------------------------------------------------
| DMC DESIGN TOKENS v1.0
|--------------------------------------------------------------------------
|
| Nơi duy nhất quản lý các giá trị giao diện dùng chung của DMC.
|
| Không viết CSS cho Component trong file này.
| Chỉ chứa biến thiết kế.
|
*/

:root {
    /* =====================================================
       BRAND COLORS
    ===================================================== */

    --dmc-color-primary: #18c964;
    --dmc-color-primary-dark: #10a954;
    --dmc-color-link: #1687d9;


    /* =====================================================
       SURFACES
    ===================================================== */

    --dmc-color-page: #f5f7f8;
    --dmc-color-surface: #ffffff;
    --dmc-color-image-bg: #f3f5f7;
    --dmc-color-soft-green: #eef8f2;


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

    --dmc-color-text: #222222;
    --dmc-color-text-secondary: #59636b;
    --dmc-color-text-muted: #7f8991;


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

    --dmc-color-danger: #e53935;
    --dmc-color-focus: rgba(24, 201, 100, 0.24);


    /* =====================================================
       BORDER
    ===================================================== */

    --dmc-color-border: #e8edf0;


    /* =====================================================
       BORDER RADIUS
    ===================================================== */

    --dmc-radius-sm: 8px;
    --dmc-radius-md: 14px;
    --dmc-radius-lg: 18px;
    --dmc-radius-pill: 999px;


    /* =====================================================
       SHADOWS
    ===================================================== */

    --dmc-shadow-card:
        0 2px 8px rgba(0, 0, 0, 0.06);

    --dmc-shadow-card-hover:
        0 5px 16px rgba(0, 0, 0, 0.1);


    /* =====================================================
       SPACING
    ===================================================== */

    --dmc-space-xs: 4px;
    --dmc-space-sm: 8px;
    --dmc-space-md: 12px;
    --dmc-space-lg: 16px;
    --dmc-space-xl: 24px;
    --dmc-space-2xl: 32px;


    /* =====================================================
       COMPONENT LAYOUT
    ===================================================== */

    --dmc-section-gap: 24px;
    --dmc-card-gap: 10px;
}