/* =========================================================
   BÔNG CẢI DESIGN TOKENS

   Chỉ chỉnh màu, kích thước và bo góc tại đây.
   Các file CSS khác sử dụng lại những biến này.
   ========================================================= */

:root {
    /* Bốn màu thương hiệu chính */
    --brand-red: #ba5a5a;
    --brand-yellow: #f7e49b;
    --brand-green: #a4ce8b;
    --brand-blue: #86bcbd;

    /* Phiên bản nhạt dùng làm nền */
    --brand-red-soft: #f3dddd;
    --brand-yellow-soft: #fff7d6;
    --brand-green-soft: #e5f2dc;
    --brand-blue-soft: #deeff0;

    /* Màu giao diện light theme */
    --color-page: #f4f6f4;
    --color-surface: #ffffff;
    --color-surface-muted: #eef1ef;
    --color-surface-hover: #e8ece9;

    --color-text: #26302d;
    --color-text-muted: #68736f;
    --color-border: #ccd4cf;
    --color-border-strong: #aeb9b3;

    /* Màu theo ý nghĩa */
    --color-primary: var(--brand-red);
    --color-success: var(--brand-green);
    --color-warning: var(--brand-yellow);
    --color-info: var(--brand-blue);
    --color-danger: var(--brand-red);

    /* Kích thước giao diện */
    --admin-max-width: 1480px;
    --admin-gutter: 20px;

    /* Bo góc nhẹ */
    --radius-small: 5px;
    --radius-medium: 8px;
    --radius-large: 12px;

    /* Font ưu tiên giao diện Apple/iOS */
    --font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "SF Pro Display",
        "Segoe UI",
        sans-serif;
}