/* ==========================================================================
   DESIGN TOKENS - VISION INDUSTRIES
   Comprehensive CSS custom properties extracted from visionindustries.vn
   ========================================================================== */

:root {
  /* Brand Primary Colors (User Specified Exact Palette) */
  --color-primary: #163055;          /* Deep Navy (HEX 163055, RGB 21 48 86) */
  --color-primary-dark: #0D1E36;     /* Midnight Navy topbar & header background */
  --color-primary-light: #266A95;    /* Teal Ocean Blue (HEX 266A95, RGB 35 108 151) */
  --color-footer-bg: #102442;        /* Footer deep navy background */
  
  /* Accent Colors */
  --color-accent-gold: #266A95;      /* Signature Ocean Blue Accent */
  --color-accent-gold-hover: #1e5578; /* Ocean blue hover state */
  --color-accent-cyan: #266A95;      /* Ocean blue for subheadings & borders */
  --color-accent-cyan-light: #4c8fb8;
  --color-accent-green: #28a745;     /* Success status */
  --color-accent-red: #d9534f;       /* Warning/notice */

  /* Neutral & Text Colors */
  --color-text-main: #162B45;        /* Main dark text */
  --color-text-dark: #0D1A2B;
  --color-text-muted: #586B85;       /* Subtext / gray */
  --color-text-light: #ffffff;       /* Pure white on dark */
  --color-text-light-muted: rgba(255, 255, 255, 0.75);

  /* Background Colors */
  --color-bg-body: #ffffff;          /* Pure white background kept intact as requested */
  --color-bg-light: #F2F7FA;         /* Soft oceanic off-white */
  --color-bg-alt: #E8F1F7;           /* Light ocean section background */
  --color-bg-dark: #163055;          /* Deep ocean background for dark sections */
  --color-bg-card: #ffffff;

  /* Borders & Dividers */
  --color-border-dark: #23456F;      /* Header bottom border & dividers */
  --color-border-light: #DEE8F0;     /* Card border */
  --color-border-hover: #266A95;
  --color-divider: #2C5282;

  /* Typography System */
  --font-primary: Arial, Helvetica, sans-serif;
  --font-secondary: Arial, Helvetica, sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --font-size-body: 1rem;     /* 16px – body base */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px – body text */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2.1875rem; /* 35px – Ngành Giấy / Paper Industry */
  --font-size-3xl: 2.8125rem; /* 45px – Tên công ty */
  --font-size-4xl: 3.4375rem; /* 55px – Hero title chính */

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

  /* Spacing Scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Box Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 14px 30px rgba(2, 161, 255, 0.15);
  --shadow-glow: 0 0 20px rgba(255, 197, 39, 0.4);

  /* Container Widths */
  --container-max-width: 1400px;
  --container-padding: 1.5rem;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Hierarchy */
  --z-back: -1;
  --z-normal: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-floating: 1060;
  --z-tooltip: 1070;
}