/* =============================================================================
   Mẫu giao diện cho trang danh thiếp công khai.

   Bảng màu Tailwind của trang trỏ vào các biến dưới đây, nên chỉ cần ghi đè
   biến là toàn bộ class (bg-surface, text-primary, border-outline-variant…)
   đổi theo. Không cần override từng utility như bản cũ trong site.css —
   cách đó nhắm sai tên class nên chưa bao giờ có tác dụng.

   Thêm mẫu mới: thêm một khối body.tpl-{ten} và một bản ghi SmoCardTemplate
   có CssClass trùng tên.

   MỌI MẪU ĐỀU NỀN SÁNG. Hai mẫu nền tối (tpl-business, tpl-luxury) đã bị bỏ:
   logo mạng xã hội và mã QR đều là ảnh nền trắng, đặt lên nền tối thì nổi lên
   như sticker dán. Khách chọn giữa các sắc nhấn, không chọn giữa sáng và tối.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Mặc định — tpl-modern (xanh dương, nền sáng)
   --------------------------------------------------------------------------- */
:root {
    --c-background: #fbf8ff;
    --c-on-background: #191b25;

    --c-surface: #fbf8ff;
    --c-surface-dim: #d9d9e7;
    --c-surface-bright: #fbf8ff;
    --c-surface-variant: #e2e1ef;
    --c-surface-tint: #0b46f9;
    --c-surface-container-lowest: #ffffff;
    --c-surface-container-low: #f3f2ff;
    --c-surface-container: #edecfb;
    --c-surface-container-high: #e8e7f5;
    --c-surface-container-highest: #e2e1ef;

    --c-on-surface: #191b25;
    --c-on-surface-variant: #434656;

    --c-primary: #0037d0;
    --c-on-primary: #ffffff;
    --c-primary-container: #1b4dff;
    --c-on-primary-container: #dde0ff;
    --c-primary-fixed: #dee1ff;
    --c-primary-fixed-dim: #b9c3ff;
    --c-inverse-primary: #b9c3ff;

    --c-secondary: #585f6b;
    --c-on-secondary: #ffffff;
    --c-secondary-container: #dce2f1;
    --c-on-secondary-container: #5e6571;
    --c-secondary-fixed: #dce2f1;
    --c-secondary-fixed-dim: #c0c7d5;

    --c-tertiary: #912400;
    --c-on-tertiary: #ffffff;
    --c-tertiary-container: #bb3100;
    --c-on-tertiary-container: #ffdad0;
    --c-tertiary-fixed: #ffdbd1;
    --c-tertiary-fixed-dim: #ffb5a0;

    --c-outline: #747688;
    --c-outline-variant: #c4c5d9;

    --c-error: #ba1a1a;
    --c-on-error: #ffffff;
    --c-error-container: #ffdad6;
    --c-on-error-container: #93000a;

    --c-inverse-surface: #2e303a;
    --c-inverse-on-surface: #f0effe;

    /* Bo góc và đổ bóng — vài mẫu cố tình phẳng hoặc bo mạnh hơn */
    --c-radius-card: 0.75rem;
    --c-shadow-card: 0 1px 3px rgba(10, 14, 26, .08);
}

/* ---------------------------------------------------------------------------
   tpl-classic — Sang trọng: kem ấm, xanh navy, nhấn vàng đồng
   --------------------------------------------------------------------------- */
body.tpl-classic {
    --c-background: #f7f3ec;
    --c-on-background: #2a2118;

    --c-surface: #fffdf9;
    --c-surface-variant: #ebe3d6;
    --c-surface-container-lowest: #ffffff;
    --c-surface-container-low: #faf6ef;
    --c-surface-container: #f2ebe0;
    --c-surface-container-high: #ece3d5;
    --c-surface-container-highest: #e5dbcb;

    --c-on-surface: #2a2118;
    --c-on-surface-variant: #6b5c48;

    --c-primary: #1e3a5f;
    --c-on-primary: #ffffff;
    --c-primary-fixed: #e3ded2;
    --c-primary-fixed-dim: #c9bfa8;
    --c-inverse-primary: #b9c9de;

    --c-secondary: #8a6d3b;
    --c-tertiary-container: #a67c1a;

    --c-outline: #a08f75;
    --c-outline-variant: #ddd2bf;

    --c-inverse-surface: #2a2118;
    --c-inverse-on-surface: #faf6ef;

    --c-radius-card: 0.375rem;
    --c-shadow-card: 0 1px 2px rgba(42, 33, 24, .10);
}

/* ---------------------------------------------------------------------------
   tpl-minimal — Tối giản: xám trung tính, phẳng, không đổ bóng
   --------------------------------------------------------------------------- */
body.tpl-minimal {
    --c-background: #fafafa;
    --c-on-background: #18181b;

    --c-surface: #ffffff;
    --c-surface-variant: #f4f4f5;
    --c-surface-container-lowest: #ffffff;
    --c-surface-container-low: #fafafa;
    --c-surface-container: #f4f4f5;
    --c-surface-container-high: #e4e4e7;
    --c-surface-container-highest: #d4d4d8;

    --c-on-surface: #18181b;
    --c-on-surface-variant: #52525b;

    --c-primary: #27272a;
    --c-on-primary: #ffffff;
    --c-primary-fixed: #f4f4f5;
    --c-primary-fixed-dim: #d4d4d8;
    --c-inverse-primary: #a1a1aa;

    --c-secondary: #71717a;
    --c-tertiary-container: #3f3f46;

    --c-outline: #a1a1aa;
    --c-outline-variant: #e4e4e7;

    --c-inverse-surface: #18181b;
    --c-inverse-on-surface: #fafafa;

    --c-radius-card: 0.25rem;
    --c-shadow-card: none;
}

/* ---------------------------------------------------------------------------
   tpl-corporate — Doanh nghiệp: xám xanh, navy đậm
   --------------------------------------------------------------------------- */
body.tpl-corporate {
    --c-background: #f1f5f9;
    --c-on-background: #0f172a;

    --c-surface: #ffffff;
    --c-surface-variant: #e2e8f0;
    --c-surface-container-lowest: #ffffff;
    --c-surface-container-low: #f8fafc;
    --c-surface-container: #eef2f6;
    --c-surface-container-high: #e2e8f0;
    --c-surface-container-highest: #cbd5e1;

    --c-on-surface: #0f172a;
    --c-on-surface-variant: #475569;

    --c-primary: #0f766e;
    --c-on-primary: #ffffff;
    --c-primary-fixed: #d5efec;
    --c-primary-fixed-dim: #a7dad4;
    --c-inverse-primary: #5eb8ae;

    --c-secondary: #475569;
    --c-tertiary-container: #0e7490;

    --c-outline: #94a3b8;
    --c-outline-variant: #cbd5e1;

    --c-inverse-surface: #0f172a;
    --c-inverse-on-surface: #f8fafc;

    --c-radius-card: 0.5rem;
    --c-shadow-card: 0 1px 2px rgba(15, 23, 42, .08);
}

/* ---------------------------------------------------------------------------
   tpl-creative — Sáng tạo: tím violet, bo góc mạnh (Premium)
   --------------------------------------------------------------------------- */
body.tpl-creative {
    --c-background: #f5f3ff;
    --c-on-background: #2e1065;

    --c-surface: #ffffff;
    --c-surface-variant: #ede9fe;
    --c-surface-container-lowest: #ffffff;
    --c-surface-container-low: #faf8ff;
    --c-surface-container: #f0ebff;
    --c-surface-container-high: #e6dcff;
    --c-surface-container-highest: #ddd6fe;

    --c-on-surface: #2e1065;
    --c-on-surface-variant: #6d28d9;

    --c-primary: #7c3aed;
    --c-on-primary: #ffffff;
    --c-primary-fixed: #ede9fe;
    --c-primary-fixed-dim: #c4b5fd;
    --c-inverse-primary: #a78bfa;

    --c-secondary: #9333ea;
    --c-tertiary-container: #db2777;

    --c-outline: #a78bfa;
    --c-outline-variant: #ddd6fe;

    --c-inverse-surface: #2e1065;
    --c-inverse-on-surface: #f5f3ff;

    --c-radius-card: 1.25rem;
    --c-shadow-card: 0 4px 14px rgba(124, 58, 237, .14);
}