/**
 * === Design Tokens v5 — Final Limited Palette ===
 *
 * Mô tả: Source of truth duy nhất cho toàn bộ design tokens.
 *        5 base color tokens + semantic aliases + glass derived.
 *        Admin thay đổi qua Customizer → runtime override qua inc/design-system/.
 *
 * Flow:
 *   1. Load 5 base color tokens (LIMIT — không vượt quá)
 *   2. Load semantic aliases (reuse base, không tính vào limit)
 *   3. Load glass derived tokens (rgba derived từ base)
 *   4. Dark mode override block [data-theme="dark"] — same tokens, khác values
 *   5. Typography, spacing, motion tokens giữ nguyên từ v4
 *
 * IMPORTANT: Không thêm color token mới mà không có approval.
 *            Mọi thay đổi màu đi qua admin Customizer UI (Phase 00a Step 6+).
 */

:root {
  /* =========================================================
     5 Base Colors — LIMIT: không thêm token màu mới ở đây
     1. brand-primary   = xanh thương hiệu chính
     2. brand-accent    = vàng nhấn chính
     3. canvas-white    = nền sáng chủ đạo
     4. ink-dark        = màu chữ đậm
     5. ink-muted       = màu chữ phụ / trung tính
     ========================================================= */
  --color-brand-primary:   #1665B1;
  --color-brand-accent:    #F2C94C;
  --color-canvas-white:    #FFFFFF;
  --color-ink-dark:        #222223;
  --color-ink-muted:       #6F7782;

  /* =========================================================
     Semantic Aliases — reuse base tokens (không tính vào limit)
     ========================================================= */
  --color-success:  var(--color-brand-primary);
  --color-info:     var(--color-brand-primary);
  --color-warning:  var(--color-brand-accent);
  --color-error:    #C53030;
  --color-focus:    var(--color-brand-accent);

  --color-canvas:        var(--color-canvas-white);
  --color-surface:       var(--color-canvas-white);
  --color-surface-warm:  #F8FAFD;
  --color-ink-strong:    var(--color-ink-dark);
  --color-ink-default:   #3D4A59;
  --color-border:        rgba(22, 101, 177, 0.14);

  /* Derived brand shades — vẫn thuộc hệ 5 màu, dùng cho gradient/shadow */
  --color-brand-primary-light: #3E8DD8;
  --color-brand-primary-mid:   #2A75BE;
  --color-brand-primary-deep:  #0F4F8D;
  --color-brand-accent-mid:    #E9BB2D;
  --color-brand-accent-deep:   #D8A61A;
  --color-brand-warning-deep:  #B7791F;
  --color-surface-soft-blue:   #EEF3F9;

  /* =========================================================
     Glass Derived — rgba từ base tokens (không tính vào limit)
     ========================================================= */
  --color-glass-light:        rgba(255, 255, 255, 0.88);
  --color-glass-light-strong: rgba(255, 255, 255, 0.96);
  --color-glass-dark:         rgba(22, 101, 177, 0.88);
  --color-glass-border:       rgba(22, 101, 177, 0.10);
  --color-brand-primary-alpha-08: rgba(22, 101, 177, 0.08);
  --color-brand-primary-alpha-10: rgba(22, 101, 177, 0.10);
  --color-brand-primary-alpha-18: rgba(22, 101, 177, 0.18);
  --color-brand-primary-alpha-22: rgba(22, 101, 177, 0.22);
  --color-brand-primary-alpha-42: rgba(22, 101, 177, 0.42);
  --color-brand-primary-alpha-14: rgba(22, 101, 177, 0.14);
  --color-brand-accent-alpha-12:  rgba(242, 201, 76, 0.12);
  --color-brand-accent-alpha-16:  rgba(242, 201, 76, 0.16);
  --color-brand-accent-alpha-26:  rgba(242, 201, 76, 0.26);
  --color-brand-accent-alpha-80:  rgba(242, 201, 76, 0.80);
  --color-brand-accent-alpha-00:  rgba(242, 201, 76, 0.00);
  --color-ink-dark-alpha-18:      rgba(34, 34, 35, 0.18);
  --color-ink-dark-alpha-22:      rgba(34, 34, 35, 0.22);
  --color-ink-dark-alpha-08:      rgba(34, 34, 35, 0.08);
  --color-ink-dark-alpha-42:      rgba(34, 34, 35, 0.42);
  --color-ink-dark-alpha-62:      rgba(34, 34, 35, 0.62);
  --color-ink-dark-alpha-00:      rgba(34, 34, 35, 0.00);
  --color-white-alpha-04:         rgba(255, 255, 255, 0.04);
  --color-white-alpha-16:         rgba(255, 255, 255, 0.16);
  --color-white-alpha-20:         rgba(255, 255, 255, 0.20);
  --color-white-alpha-28:         rgba(255, 255, 255, 0.28);
  --color-white-alpha-32:         rgba(255, 255, 255, 0.32);
  --color-white-alpha-36:         rgba(255, 255, 255, 0.36);
  --color-white-alpha-38:         rgba(255, 255, 255, 0.38);
  --color-white-alpha-72:         rgba(255, 255, 255, 0.72);
  --color-white-alpha-42:         rgba(255, 255, 255, 0.42);
  --color-white-alpha-82:         rgba(255, 255, 255, 0.82);
  --color-white-alpha-86:         rgba(255, 255, 255, 0.86);
  --color-white-alpha-88:         rgba(255, 255, 255, 0.88);
  --color-white-alpha-90:         rgba(255, 255, 255, 0.90);
  --color-white-alpha-96:         rgba(255, 255, 255, 0.96);

  /* =========================================================
     Typography tokens → moved to design-tokens-typography.css (Phase 00b)
     Enqueued after this file in inc/enqueue-assets.php.
     Includes: --font-primary, --font-accent, 13 --text-* size tokens,
               --weight-*, --lh-*, --tracking-* tokens.
     Legacy aliases (--font-heading, --font-body, --text-xs…--text-3xl,
     --font-size-*, --leading-*, --font-weight-*) moved to
     design-tokens-typography-legacy.css.
     ========================================================= */

  /* =========================================================
     Motion tokens (5 cấp UI transitions)
     ========================================================= */
  --motion-fast:   150ms;
  --motion-quick:  180ms;
  --motion-base:   220ms;
  --motion-normal: 240ms;
  --motion-slow:   360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.65, 0, 0.35, 1);

  /* Motion tokens: entrance durations (section scroll-reveal) */
  --motion-entrance-fast:     400ms;
  --motion-entrance-base:     600ms;
  --motion-entrance-slow:     800ms;
  --motion-entrance-dramatic: 1200ms;

  /* Motion tokens: stagger steps */
  --stagger-fast: 50ms;
  --stagger-base: 100ms;
  --stagger-slow: 200ms;

  /* Motion tokens: reveal transform distances */
  --reveal-distance-sm: 10px;
  --reveal-distance-md: 20px;
  --reveal-distance-lg: 40px;

  /* =========================================================
     Layout tokens
     ========================================================= */
  --container-max:    1180px;
  --container-narrow: 880px;
  --container-wide:   1440px;
  --gutter-mobile:    16px;
  --gutter-tablet:    24px;
  --gutter-desktop:   40px;
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* =========================================================
     Shadow tokens
     ========================================================= */
  --shadow-sm:    0 1px 2px rgba(34, 34, 35, 0.05);
  --shadow-md:    0 4px 8px rgba(34, 34, 35, 0.08), 0 2px 4px rgba(34, 34, 35, 0.04);
  --shadow-lg:    0 8px 16px rgba(34, 34, 35, 0.12), 0 4px 8px rgba(34, 34, 35, 0.06);
  --shadow-xl:    0 16px 32px rgba(34, 34, 35, 0.16), 0 8px 16px rgba(34, 34, 35, 0.08);
  --shadow-focus: 0 0 0 3px rgba(242, 201, 76, 0.42);
  --shadow-soft:  0 10px 30px rgba(22, 101, 177, 0.10);
  --shadow-brand-card: 0 32px 72px rgba(22, 101, 177, 0.22);
  --shadow-accent-soft: 0 10px 24px rgba(242, 201, 76, 0.26);
  --shadow-accent-strong: 0 18px 36px rgba(242, 201, 76, 0.26);
  --shadow-brand-hero: 0 22px 42px rgba(22, 101, 177, 0.22);

  /* =========================================================
     Section rhythm
     ========================================================= */
  --section-padding-y-lg: 88px;
  --section-padding-y-md: 72px;
  --section-padding-y-sm: 48px;
  --section-gap:          32px;

  /* =========================================================
     Glassmorphism tokens
     ========================================================= */
  --glass-subtle-bg:      rgba(255, 255, 255, 0.94);
  --glass-medium-bg:      rgba(255, 255, 255, 0.88);
  --glass-strong-bg:      rgba(22, 101, 177, 0.82);
  --glass-subtle-bg-dark: rgba(10, 20, 16, 0.88);
  --glass-medium-bg-dark: rgba(10, 20, 16, 0.84);
  --glass-strong-bg-dark: rgba(5, 12, 9, 0.78);
  --glass-border:         rgba(22, 101, 177, 0.18);
  --glass-border-light:   rgba(255, 255, 255, 0.55);
  --glass-blur-sm:        8px;
  --glass-blur-md:        12px;
  --glass-blur-lg:        18px;
  --shadow-glass:         0 18px 50px rgba(22, 101, 177, 0.14);
  --glass-social-bg:      rgba(255, 255, 255, 0.12);
  --glass-social-bg-hover: rgba(255, 255, 255, 0.20);
  --glass-social-border:  rgba(255, 255, 255, 0.18);

  /* =========================================================
     Form tokens
     ========================================================= */
  --form-bg:           var(--color-surface);
  --form-border:       var(--color-border);
  --form-border-focus: var(--color-brand-secondary);
  --form-label:        var(--color-ink-strong);
  --form-helper:       var(--color-ink-muted);
  --form-error:        var(--color-error);
  --form-radius:       12px;
  --form-input-height: 48px;

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

  /* =========================================================
     Neutral grayscale (for generic UI, não thuộc brand palette)
     ========================================================= */
  --color-neutral-50:  #F8FAFD;
  --color-neutral-100: #EEF3F9;
  --color-neutral-200: #D9E3F0;
  --color-neutral-300: #B8C6D8;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #6F7782;
  --color-neutral-600: #596273;
  --color-neutral-700: #3D4A59;
  --color-neutral-800: #2A3441;
  --color-neutral-900: #222223;
  --color-white:       var(--color-canvas-white);

  /* --font-size-* aliases + --font-weight-* numeric aliases →
     moved to design-tokens-typography-legacy.css (Phase 00b) */

  /* =========================================================
     Z-index tokens
     ========================================================= */
  --z-base:     0;
  --z-content:  1;
  --z-sticky:   10;
  --z-header:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-cursor:   9999;
}

/* =========================================================
   Mobile section rhythm overrides
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --section-padding-y-lg: 56px;
    --section-padding-y-md: 48px;
    --section-padding-y-sm: 36px;
    --section-gap:          20px;
  }
}

/* =========================================================
   Dark mode overrides — same 10 tokens, different values
   Toggle via: document.documentElement.dataset.theme = 'dark'
   ========================================================= */
[data-theme="dark"] {
  --color-brand-primary:   #3E8DD8;
  --color-brand-accent:    #F2C94C;
  --color-canvas-white:    #0E1621;
  --color-ink-dark:        #F5F7FA;
  --color-ink-muted:       #A5B4C6;

  --color-canvas:          #0E1621;
  --color-surface:         #15202D;
  --color-surface-warm:    #1B2938;
  --color-ink-strong:      #F5F7FA;
  --color-ink-default:     #D7E0EA;
  --color-border:          rgba(62, 141, 216, 0.18);
}