/* ═══════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (Design Tokens)
   Cổng Thông Tin - Hà Nội
   ═══════════════════════════════════════════════ */

:root {
  /* ─── Colors ─── */
  --color-primary: #3340D0;
  --color-primary-light: #3292FB;
  --color-primary-dark: #1a2094;
  --color-secondary: #66A7FF;
  --color-accent: #00DCF9;
  --color-accent-light: #53B5D5;

  /* Gradients */
  --gradient-primary: linear-gradient(36deg, #3340D0 0%, #3292FB 100%);
  --gradient-radial: radial-gradient(circle, rgba(15, 58, 214, 0) 0%, rgba(0, 212, 234, 1) 100%);

  /* Neutrals */
  --color-white: #ffffff;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F2F4F7;
  --color-gray-200: #EAECF0;
  --color-gray-300: #D0D5DD;
  --color-gray-400: #98A2B3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1D2939;
  --color-gray-900: #101828;
  --color-black: #000000;

  /* Semantic */
  --color-success: #17B26A;
  --color-warning: #F79009;
  --color-error: #F04438;
  --color-info: #004DB0;

  /* Background */
  --bg-body: #ffffff;
  --bg-card: var(--color-white);
  --bg-glass: rgba(255, 255, 255, 0.1);
  --bg-glass-card: rgba(255, 255, 255, 0.8);

  /* Text */
  --text-primary: #000000;
  --text-secondary: var(--color-gray-600);
  --text-muted: var(--color-gray-500);
  --text-inverse: var(--color-white);
  --text-subtle: #EAECF0;
  --text-dark: #000B33;

  /* ─── Typography ─── */
  --font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Display sizes (from Figma) */
  --font-size-2xl-display: 72px;
  /* Display 2xl */
  --font-size-xl-display: 60px;
  /* Display xl */
  --font-size-lg-display: 48px;
  /* Display lg */
  --font-size-md-display: 36px;
  /* Display md */
  --font-size-sm-display: 30px;
  /* Display sm */
  --font-size-xs-display: 24px;
  /* Display xs */

  /* Text sizes */
  --font-size-xl: 20px;
  --font-size-lg: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ─── Spacing ─── */
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─── Layout ─── */
  --container-max-width: 1280px;
  --container-padding: 80px;
  --header-height: 64px;

  /* ─── Border Radius ─── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 48px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 2px rgba(14, 36, 85, 0.75);
  --shadow-glow-inset: 0 0 2px rgba(14, 36, 85, 0.75), inset 0 0 8px rgba(0, 85, 195, 1);
  --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.1);

  /* ─── Effects ─── */
  --blur-header: blur(64px);
  --blur-bg: blur(135px);
  --blur-glow: blur(224px);
  --blur-chat: blur(40px);

  /* ─── Transitions ─── */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Z-Index ─── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
}