/*
 * ThaiNguyenPC Design Tokens (Refined Premium Gaming)
 */

:root {
  /* ========================================
     COLORS (Premium Deep Red)
     ======================================== */
  
  /* Primary & Accents */
  --color-primary: #D71920;    /* Deeper, Pro Red */
  --color-primary-hover: #B01218;
  --color-secondary: #0A0A0A;  /* Rich Black */
  --color-secondary-light: #1F1F1F;
  --color-accent: #FFD700;     /* Gold */
  --color-accent-soft: #FFF8E1;

  /* Status Colors */
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-sale: #D71920;

  /* Text Colors */
  --color-text: #191919;
  --color-text-secondary: #555555;
  --color-text-light: #888888;
  --color-text-inverse: #FFFFFF;
  --color-white: #FFFFFF;

  /* Background Colors */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F8F9FA; /* Cleaner Gray */
  --color-bg-dark: #0A0A0A;
  --color-background: var(--color-bg);
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-accent-dark: var(--color-bg-dark);

  /* Borders */
  --color-border: #E5E5E5;
  --color-border-dark: #333333;

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  
  --font-base: 'Inter', sans-serif;
  --font-heading: 'Roboto', sans-serif;
  --font-primary: var(--font-base);
  --font-body: var(--font-base);

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

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

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ========================================
     SPACING (4px Grid)
     ======================================== */
  
  --space-0: 0px;
  --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;

  /* ========================================
     LAYOUT & GEOMETRY (Sharp Style)
     ======================================== */

  --container-width: 1200px;
  --container-xl: 1400px;
  --container-padding: 16px;

  /* Border Radius (modern, slightly rounded) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-2: 2px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.2);
  --shadow-primary: 0 4px 14px rgba(215, 25, 32, 0.3); /* Red Glow */
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-fluid: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index */
  --z-header: 100;
  --z-dropdown: 200;
  --z-sticky: 500;
  --z-modal: 1000;
}