/* ==========================================================================
   variables.css
   Design tokens dùng chung cho toàn bộ website (màu thương hiệu, typography,
   spacing, shadow, border-radius, transition, z-index, gradient...).
   Breakpoints không thể khai báo bằng CSS custom property trong media query,
   nên được ghi chú thống nhất tại đây và dùng lại trong các file *.css khác:
     - Mobile:   max-width: 599px
     - Tablet:   600px - 1023px
     - Desktop:  >= 1024px
   ========================================================================== */

:root {
  /* ---- Màu thương hiệu (theo bộ nhận diện Flezi Mercuria) ---- */
  --color-orange: #F37021;
  --color-orange-dark: #D65A10;
  --color-orange-light: #FCE3D3;
  --color-orange-soft: #FBC94C;
  --color-blue: #034EA2;
  --color-blue-dark: #023970;
  --color-blue-light: #E1EBF8;
  --color-blue-soft: #5A9BE0;

  /* ---- Gradient thương hiệu (lấy cảm hứng từ logo) ---- */
  --gradient-brand: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-soft) 45%, var(--color-orange-soft) 75%, var(--color-orange) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(3, 78, 162, 0.08) 0%, rgba(243, 112, 33, 0.08) 100%);
  --gradient-hero: linear-gradient(120deg, var(--color-blue-dark) 0%, var(--color-blue) 55%, #0D6BC4 78%, var(--color-orange) 130%);
  --gradient-orange: linear-gradient(135deg, var(--color-orange-soft) 0%, var(--color-orange) 100%);
  --gradient-cta: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-dark) 100%);

  /* ---- Màu nền tảng / trung tính ---- */
  --color-bg: #F7F8FA;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F3F6;
  --color-border: #E3E6EC;
  --color-border-strong: #C7CCD6;

  /* ---- Màu chữ ---- */
  --color-text-primary: #1B2430;
  --color-text-secondary: #5A6473;
  --color-text-muted: #8B93A1;
  --color-text-inverse: #FFFFFF;

  /* ---- Màu ngữ nghĩa ---- */
  --color-success: #1F8A4C;
  --color-success-bg: #E5F5EA;
  --color-error: #D63C3C;
  --color-error-bg: #FCE9E9;
  --color-warning: #C7801A;
  --color-warning-bg: #FCF1DD;
  --color-info: var(--color-blue);
  --color-info-bg: var(--color-blue-light);

  /* ---- Typography ---- */
  --font-family-base: "Montserrat", "Noto Sans JP", "Helvetica Neue", Arial, "Roboto", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 2rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.25rem;
  --font-size-3xl: 2.85rem;
  --line-height-tight: 1.25;
  --line-height-base: 1.55;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Border radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.06), 0 1px 1px rgba(20, 30, 50, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 30, 50, 0.08), 0 2px 4px rgba(20, 30, 50, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 30, 50, 0.14), 0 4px 8px rgba(20, 30, 50, 0.06);
  --shadow-xl: 0 24px 60px rgba(3, 78, 162, 0.18), 0 8px 16px rgba(20, 30, 50, 0.08);
  --shadow-focus: 0 0 0 3px rgba(3, 78, 162, 0.25);
  --shadow-orange-glow: 0 8px 24px rgba(243, 112, 33, 0.28);
  --shadow-blue-glow: 0 8px 24px rgba(3, 78, 162, 0.28);

  /* ---- Transitions ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --header-height: 76px;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal-backdrop: 300;
  --z-modal: 310;
  --z-toast: 400;
}