/* ==========================================================================
   SCO Vietnam — Design Tokens
   Biến dùng chung cho toàn bộ giao diện người dùng (public site).
   Nạp đầu tiên, trước mọi file CSS khác.
   ========================================================================== */
:root {
    /* --------------------------------------------------------------------
       Brand — đỏ SCO hạ độ gắt (#FF0000 -> #DC2626) cho tông tech company.
       Tên biến giữ nguyên để không phá 60KB CSS đang dùng.
       -------------------------------------------------------------------- */
    --pms-primary: #DC2626;
    --pms-primary-dark: #B91C1C;
    --pms-primary-light: #EF4444;
    --pms-primary-50: #FEF2F2;
    --pms-primary-100: #FEE2E2;
    --pms-primary-200: #FECACA;

    /* Secondary (Blue) — dùng cho link, module CRM/dữ liệu */
    --pms-secondary: #2563EB;
    --pms-secondary-dark: #1D4ED8;
    --pms-secondary-light: #3B82F6;
    --pms-secondary-50: #EFF6FF;

    /* Accent (Amber) */
    --pms-accent: #F59E0B;
    --pms-accent-dark: #D97706;

    /* --------------------------------------------------------------------
       Neutrals — thang xám lạnh (slate) thay xám trung tính
       -------------------------------------------------------------------- */
    --pms-ink: #0B1220;          /* nền section tối */
    --pms-ink-soft: #111C31;     /* nền tối phụ */
    --pms-dark: #0F172A;
    --pms-gray-900: #1E293B;
    --pms-gray-800: #334155;
    --pms-gray-700: #475569;
    --pms-gray-600: #64748B;
    --pms-gray-500: #94A3B8;
    --pms-gray-400: #CBD5E1;
    --pms-gray-300: #E2E8F0;
    --pms-gray-200: #EEF2F6;
    --pms-gray-100: #F8FAFC;
    --pms-surface: #F7F8FA;      /* nền section sáng xen kẽ */
    --pms-border: #E5E7EB;       /* viền 1px chuẩn */
    --pms-white: #FFFFFF;

    /* Status */
    --pms-success: #059669;
    --pms-warning: #D97706;
    --pms-error: #DC2626;
    --pms-info: #2563EB;

    /* --------------------------------------------------------------------
       Typography
       -------------------------------------------------------------------- */
    --pms-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pms-font-heading: 'Plus Jakarta Sans', var(--pms-font-primary);

    --pms-text-hero: clamp(2.5rem, 1.4rem + 3.4vw, 4rem);      /* 40 -> 64px */
    --pms-text-h2: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);    /* 28 -> 44px */
    --pms-text-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);    /* 20 -> 24px */
    --pms-text-lead: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);  /* 16 -> 19px */

    --pms-tracking-tight: -0.02em;
    --pms-tracking-tighter: -0.03em;
    --pms-leading-tight: 1.1;
    --pms-leading-body: 1.65;

    /* --------------------------------------------------------------------
       Spacing / Layout
       -------------------------------------------------------------------- */
    --pms-space-1: 4px;
    --pms-space-2: 8px;
    --pms-space-3: 12px;
    --pms-space-4: 16px;
    --pms-space-6: 24px;
    --pms-space-8: 32px;
    --pms-space-12: 48px;
    --pms-space-16: 64px;
    --pms-space-24: 96px;

    --pms-section-y: clamp(56px, 4vw + 32px, 112px);   /* padding dọc section */
    --pms-section-padding: var(--pms-section-y) 0;
    --pms-container-max: 1140px;

    /* --------------------------------------------------------------------
       Shadows — nhẹ, dựa vào viền 1px thay vì đổ bóng dày
       -------------------------------------------------------------------- */
    --pms-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --pms-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    --pms-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --pms-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
    --pms-shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.10);
    --pms-shadow-ring: 0 0 0 1px var(--pms-border);

    /* --------------------------------------------------------------------
       Radius
       -------------------------------------------------------------------- */
    --pms-radius-sm: 8px;
    --pms-radius: 10px;
    --pms-radius-md: 14px;
    --pms-radius-lg: 18px;
    --pms-radius-xl: 24px;
    --pms-radius-pill: 999px;

    /* --------------------------------------------------------------------
       Motion
       -------------------------------------------------------------------- */
    --pms-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --pms-transition: all 0.15s var(--pms-ease);
    --pms-transition-slow: all 0.3s var(--pms-ease);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --pms-transition: none;
        --pms-transition-slow: none;
    }
}