/* =====================================================
   SieuThiCloud v2 — Design Tokens
   Màu chủ đạo: #27a4f2 (xanh trời)
   Mọi giá trị màu/kích thước dùng chung PHẢI khai báo ở đây.
   ===================================================== */

:root {
    color-scheme: light;

    /* ---------- Brand ---------- */
    --stc-primary: #27a4f2;
    --stc-primary-hover: #1b8fd9;
    --stc-primary-active: #157cbd;
    --stc-primary-soft: #e8f5fe;
    --stc-primary-softer: #f4fbff;
    --stc-primary-a08: rgba(39, 164, 242, 0.08);
    --stc-primary-a15: rgba(39, 164, 242, 0.15);
    --stc-primary-a25: rgba(39, 164, 242, 0.25);
    --stc-primary-a40: rgba(39, 164, 242, 0.40);
    --stc-primary-a65: rgba(39, 164, 242, 0.65);
    --stc-gradient-primary: linear-gradient(135deg, #27a4f2 0%, #1b8fd9 55%, #0f7ac4 100%);
    --stc-gradient-hero: linear-gradient(160deg, #0b3d5c 0%, #0f5a86 45%, #1b8fd9 100%);

    /* ---------- Neutral ---------- */
    --stc-white: #ffffff;
    --stc-black: #0a1a28;
    --stc-neutral-25: #fafcff;
    --stc-neutral-50: #f5fafd;
    --stc-neutral-100: #ebf4fa;
    --stc-neutral-200: #d9e8f3;
    --stc-neutral-300: #bfd8ea;
    --stc-neutral-400: #8fb8d4;
    --stc-neutral-500: #6b93b1;
    --stc-neutral-600: #54748f;
    --stc-neutral-700: #3d5a75;
    --stc-neutral-800: #24425c;
    --stc-neutral-900: #16324a;

    /* ---------- Semantic ---------- */
    --stc-success: #16a34a;
    --stc-success-soft: #eafaf0;
    --stc-warning: #d97706;
    --stc-warning-soft: #fff7e8;
    --stc-danger: #dc2626;
    --stc-danger-soft: #fef1f1;
    --stc-info: #27a4f2;
    --stc-info-soft: #e8f5fe;

    /* ---------- Surfaces ---------- */
    --stc-page: #f5fafd;
    --stc-surface: #ffffff;
    --stc-surface-subtle: #fafcff;
    --stc-text: #24425c;
    --stc-text-strong: #16324a;
    --stc-text-muted: #6b93b1;
    --stc-border: #d9e8f3;
    --stc-border-strong: #bfd8ea;
    --stc-backdrop: rgba(10, 26, 40, 0.62);
    --stc-focus: rgba(39, 164, 242, 0.30);

    /* ---------- Shadows ---------- */
    --stc-shadow-xs: 0 1px 2px rgba(22, 50, 74, 0.05), 0 4px 14px rgba(39, 164, 242, 0.06);
    --stc-shadow-sm: 0 6px 20px rgba(22, 50, 74, 0.08);
    --stc-shadow-md: 0 14px 38px rgba(22, 50, 74, 0.12);
    --stc-shadow-lg: 0 24px 64px rgba(11, 45, 68, 0.22);
    --stc-shadow-primary: 0 8px 24px rgba(39, 164, 242, 0.35);

    /* ---------- Typography ---------- */
    --stc-font-sans: "Be Vietnam Pro", Inter, "Segoe UI", Arial, sans-serif;
    --stc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --stc-text-2xs: 10px;
    --stc-text-xs: 11px;
    --stc-text-sm: 12px;
    --stc-text-md: 13px;
    --stc-text-base: 14px;
    --stc-text-lg: 16px;
    --stc-text-xl: 18px;
    --stc-text-2xl: 22px;
    --stc-text-3xl: 28px;
    --stc-text-4xl: 36px;
    --stc-text-5xl: 46px;
    --stc-leading-tight: 1.25;
    --stc-leading-normal: 1.55;
    --stc-leading-relaxed: 1.75;
    --stc-weight-regular: 400;
    --stc-weight-medium: 500;
    --stc-weight-semibold: 600;
    --stc-weight-bold: 700;
    --stc-weight-extrabold: 800;

    /* ---------- Spacing (4px scale) ---------- */
    --stc-space-1: 4px;
    --stc-space-2: 8px;
    --stc-space-3: 12px;
    --stc-space-4: 16px;
    --stc-space-5: 20px;
    --stc-space-6: 24px;
    --stc-space-8: 32px;
    --stc-space-10: 40px;
    --stc-space-12: 48px;
    --stc-space-16: 64px;
    --stc-space-20: 80px;

    /* ---------- Radius ---------- */
    --stc-radius-xs: 8px;
    --stc-radius-sm: 10px;
    --stc-radius-md: 14px;
    --stc-radius-lg: 20px;
    --stc-radius-xl: 28px;
    --stc-radius-pill: 999px;

    /* ---------- Layout ---------- */
    --stc-header-height: 68px;
    --stc-container: 1200px;
    --stc-container-wide: 1360px;

    /* ---------- Z-index ---------- */
    --stc-z-header: 100;
    --stc-z-dropdown: 200;
    --stc-z-backdrop: 900;
    --stc-z-modal: 910;
    --stc-z-toast: 1000;

    /* ---------- Motion ---------- */
    --stc-duration-fast: 140ms;
    --stc-duration-normal: 220ms;
    --stc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}