/**
 * Design Tokens từ soicau247s.org
 * Áp dụng design system mới cho soicau247.com
 * Generated: 2026-01-03
 */

:root {
  /* ============================================
     COLORS - Design System từ soicau247s.org
     ============================================ */
  
  /* Primary Colors */
  --color-primary: #007bff;
  --color-primary-rgb: 0, 123, 255;
  
  /* Brand Colors - Red (High Confidence) */
  --color-brand-red: #ff0c2a;
  --color-brand-red-dark: #d0021b;
  --color-brand-red-medium: #ed1c24;
  --color-brand-red-light: rgba(237, 28, 36, 0.666);
  
  /* Brand Colors - Blue (High Confidence) */
  --color-brand-blue: #004593;
  --color-brand-blue-dark: #0a4381;
  --color-brand-blue-light: #3198c7;
  --color-brand-blue-lighter: #00aecd;
  --color-brand-blue-pale: #81a7b8;
  
  /* Neutral Colors */
  --color-dark: #1d1d1d;
  --color-dark-medium: #3e3f42;
  --color-gray: #777777;
  --color-light: #dee2e6;
  --color-white: #ffffff;
  --color-black: #000000;
  
  /* Text Colors */
  --color-text-primary: #1d1d1d;
  --color-text-secondary: #3e3f42;
  --color-text-muted: #777777;
  --color-text-light: #dee2e6;
  --color-text-white: #ffffff;
  
  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #dee2e6;
  --color-bg-dark: #1d1d1d;
  --color-bg-light: #f8f9fa;
  
  /* Link Colors */
  --color-link: #004593;
  --color-link-hover: #cccccc;
  --color-link-active: #d0021b;
  
  /* Border Colors */
  --color-border: #dee2e6;
  --color-border-dark: #212529;
  --color-border-light: #cccccc;
  
  /* ============================================
     TYPOGRAPHY - Design System từ soicau247s.org
     ============================================ */
  
  /* Font Family */
  --font-family-primary: Arial, sans-serif;
  --font-family-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Font Sizes - Heading */
  --font-size-h1: 28px;      /* 1.75rem */
  --font-size-h1-alt: 27px;  /* 1.69rem */
  --font-size-h2: 24px;      /* 1.50rem */
  --font-size-h3: 20px;      /* 1.25rem */
  --font-size-h4: 19px;      /* 1.19rem */
  --font-size-h5: 18px;      /* 1.13rem */
  --font-size-h6: 16px;      /* 1.00rem */
  
  /* Font Sizes - Body & UI */
  --font-size-body: 15px;    /* 0.94rem */
  --font-size-body-small: 14px;  /* 0.88rem */
  --font-size-caption: 13px; /* 0.81rem */
  --font-size-small: 12px;   /* 0.75rem */
  --font-size-tiny: 11px;    /* 0.69rem */
  
  /* Font Sizes - Buttons */
  --font-size-button-large: 22.5px;  /* 1.41rem */
  --font-size-button: 15px;  /* 0.94rem */
  --font-size-button-small: 14px;  /* 0.88rem */
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.00;
  --line-height-normal: 1.50;
  --line-height-relaxed: 1.82;
  --line-height-loose: 2.00;
  
  /* ============================================
     SPACING - Design System từ soicau247s.org
     ============================================ */
  
  /* Base spacing unit: 4px */
  --spacing-base: 4px;
  
  /* Spacing Scale */
  --spacing-1: 1px;      /* 0.06rem */
  --spacing-2: 2px;      /* 0.13rem */
  --spacing-3: 3.75px;   /* 0.23rem */
  --spacing-4: 4px;      /* 0.25rem */
  --spacing-5: 4.5px;    /* 0.28rem */
  --spacing-6: 5px;      /* 0.31rem */
  --spacing-7: 5.25px;   /* 0.33rem */
  --spacing-8: 5.625px;  /* 0.35rem */
  --spacing-9: 6px;      /* 0.38rem */
  --spacing-10: 7px;     /* 0.44rem */
  --spacing-11: 7.5px;   /* 0.47rem */
  --spacing-12: 11px;    /* 0.69rem */
  --spacing-13: 11.25px; /* 0.70rem */
  --spacing-14: 13px;    /* 0.81rem */
  
  /* Common Spacing */
  --spacing-xs: var(--spacing-4);   /* 4px */
  --spacing-sm: var(--spacing-6);   /* 5px */
  --spacing-md: var(--spacing-11);  /* 7.5px */
  --spacing-lg: var(--spacing-12);  /* 11px */
  --spacing-xl: var(--spacing-14);  /* 13px */
  
  /* ============================================
     BORDERS - Design System từ soicau247s.org
     ============================================ */
  
  /* Border Radius */
  --border-radius-sm: 3.75px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-full: 9999px;
  
  /* Border Width */
  --border-width-thin: 0px;
  --border-width: 1px;
  --border-width-thick: 2px;
  
  /* Border Styles */
  --border-style: solid;
  --border-style-none: none;
  
  /* ============================================
     SHADOWS - Design System từ soicau247s.org
     ============================================ */
  
  --shadow-sm: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
  --shadow-md: rgba(0, 0, 0, 0.25) 0px 4px 8px 0px;
  --shadow-lg: rgba(52, 58, 64, 0.5) 0px 0px 0px 0.2rem;
  --shadow-focus: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem;
  --shadow-hover: rgb(0, 0, 0) 0px 0px 12px;
  
  /* ============================================
     BUTTONS - Design System từ soicau247s.org
     ============================================ */
  
  /* Button Primary (Red) */
  --button-primary-bg: var(--color-brand-red-medium);
  --button-primary-color: var(--color-white);
  --button-primary-padding: 7.5px 15px;
  --button-primary-radius: var(--border-radius-sm);
  --button-primary-hover-bg: var(--color-white);
  --button-primary-hover-color: var(--color-black);
  --button-primary-hover-border: 2px solid rgb(243, 138, 8);
  --button-primary-active-bg: #204d74;
  --button-primary-active-color: var(--color-white);
  
  /* Button Danger */
  --button-danger-bg: #dc3545;
  --button-danger-color: var(--color-white);
  --button-danger-padding: 5.625px 11.25px;
  --button-danger-radius: var(--border-radius-sm);
  
  /* Button Transparent */
  --button-transparent-bg: transparent;
  --button-transparent-color: var(--color-text-primary);
  --button-transparent-border: 1px solid rgba(0, 0, 0, 0);
  --button-transparent-hover-opacity: 0.4;
  --button-transparent-active-bg: #343a40;
  --button-transparent-active-color: var(--color-white);
  
  /* ============================================
     BREAKPOINTS - Design System từ soicau247s.org
     ============================================ */
  
  --breakpoint-xs: 98px;
  --breakpoint-sm: 240px;
  --breakpoint-md: 320px;
  --breakpoint-lg: 480px;
  --breakpoint-xl: 576px;
  --breakpoint-2xl: 768px;
  --breakpoint-3xl: 992px;
  --breakpoint-4xl: 1200px;
  --breakpoint-5xl: 1399px;
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

/* ============================================
   UTILITY CLASSES - Áp dụng design tokens
   ============================================ */

/* Color Utilities */
.text-primary { color: var(--color-primary); }
.text-brand-red { color: var(--color-brand-red); }
.text-brand-blue { color: var(--color-brand-blue); }
.text-dark { color: var(--color-text-primary); }
.text-muted { color: var(--color-text-muted); }

.bg-primary { background-color: var(--color-primary); }
.bg-brand-red { background-color: var(--color-brand-red-medium); }
.bg-brand-blue { background-color: var(--color-brand-blue); }
.bg-light { background-color: var(--color-bg-light); }

/* Typography Utilities */
.font-primary { font-family: var(--font-family-primary); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-medium { font-weight: var(--font-weight-medium); }

/* Spacing Utilities */
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }

/* Border Utilities */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }