/* ============================================
   DESIGN TOKENS — SimPhongThủy (Luxury)
   ============================================ */

:root {
    /* ── Brand — Navy + Champagne Gold ─────── */
    --primary:        #1B2A4A;
    --primary-light:  #2D4A7A;
    --primary-subtle: #EEF2F7;

    --accent:         #C4945A;
    --accent-dark:    #A07A48;
    --accent-light:   #F8F0E5;
    --accent-border:  #D4A96E;
    --accent-text:    #8B6D3F;

    /* ── CTA ───────────────────────────────── */
    --cta:            #D4583A;
    --cta-dark:       #B84430;
    --cta-light:      #FDF0ED;

    /* ── Legacy aliases (for gradual migration) */
    --red:            var(--cta);
    --red-dark:       var(--cta-dark);
    --red-light:      var(--cta-light);
    --gold:           var(--accent);
    --gold-bright:    var(--accent);
    --gold-accent:    #D4A96E;
    --gold-light:     var(--accent-light);
    --gold-dark:      var(--accent-dark);
    --gold-border:    var(--accent-border);
    --gold-text:      var(--accent-text);

    /* ── Neutrals — Cool Gray ──────────────── */
    --dark:           #1A1F36;
    --charcoal:       #2D3348;
    --warm-gray:      #6B7280;
    --muted:          #9CA3AF;
    --light-bg:       #F7F8FA;
    --cream:          #F3F4F6;
    --white:          #FFFFFF;
    --border:         #E5E7EB;
    --border-light:   #F0F1F3;
    --border-subtle:  #F3F4F6;

    /* ── Hover Backgrounds ──────────────────── */
    --hover-warm:     #FAFBFC;
    --hover-red:      var(--cta-light);
    --hover-green:    #ECFDF5;

    /* ── Semantic ───────────────────────────── */
    --green:          #2E7D5B;
    --green-dark:     #1D6548;
    --green-light:    #ECFDF5;
    --blue:           #2563EB;
    --blue-accent:    #3B82F6;
    --blue-light:     #EFF6FF;
    --orange:         #D97706;
    --orange-light:   #FFFBEB;

    /* ── Social / Brand ─────────────────────── */
    --zalo:           #0091FF;
    --facebook:       #1877F2;
    --accent-blue:    #0068FF;
    --accent-orange:  #EA580C;
    --accent-purple:  #7C3AED;

    /* ── Carrier Networks ───────────────────── */
    --carrier-viettel:      #E60000;
    --carrier-mobifone:     #005BAA;
    --carrier-vinaphone:    #007A3D;
    --carrier-vietnamobile: #FF6600;
    --carrier-itelecom:     #C62828;
    --carrier-gmobile:      #1A237E;

    /* ── Typography ─────────────────────────── */
    --font-display: 'Inter', 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Be Vietnam Pro', 'Inter', 'Segoe UI', system-ui, sans-serif;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  36px;
    --text-4xl:  48px;

    /* ── Spacing (slightly more generous) ──── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  28px;
    --space-xl:  36px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ── Radius (softer) ────────────────────── */
    --radius-sm:  10px;
    --radius-md:  14px;
    --radius-lg:  18px;
    --radius-xl:  24px;
    --radius-full:100px;

    /* ── Shadows (subtler, cool-toned) ──────── */
    --shadow-sm: 0 1px 3px rgba(27,42,74,0.04);
    --shadow-md: 0 4px 16px rgba(27,42,74,0.06);
    --shadow-lg: 0 8px 32px rgba(27,42,74,0.08);
    --shadow-xl: 0 16px 48px rgba(27,42,74,0.10);

    /* ── Layout ──────────────────────────────── */
    --container: 1140px;
    --header-h:  64px;
    --mobile-bar-h: 60px;

    /* ── Transitions ─────────────────────────── */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --duration: 0.25s;
}