/* ============================================================
   variables.css – Hệ thống thiết kế chuẩn doanh nghiệp APLICO
   ============================================================ */

:root {
  /* Brand Identity (Theo Logo APLICO) */
  --brand-navy:       #0A256B;
  --brand-navy-dark:  #071A4E;
  --brand-navy-light: #153C9E;
  --brand-red:        #C8102E;
  --brand-red-hover:  #A50C24;
  --brand-red-subtle: rgba(200, 16, 46, 0.08);

  /* Primary Action & Tech Accents */
  --color-primary:       #0A256B;
  --color-primary-hover: #071A4E;
  --color-blue:          #1D63E8;
  --color-blue-light:    #EBF2FE;
  --color-blue-glow:     rgba(29, 99, 232, 0.18);

  /* Functional Colors */
  --green:               #16A34A;
  --green-hover:         #15803D;
  --green-subtle:        #F0FDF4;
  --green-border:        #BBF7D0;

  /* Surfaces & Backgrounds - Phong cách sáng sủa, tinh tế chuẩn doanh nghiệp */
  --bg-page:             #F8FAFC;
  --bg-white:            #FFFFFF;
  --bg-card:             #FFFFFF;
  --bg-card-alt:         #F1F5F9;
  --bg-subtle:           #F8FAFC;
  --bg-dark-section:     #0A192F;
  --bg-dark-card:        #112240;

  /* Typography Colors */
  --text-primary:        #0F172A;
  --text-secondary:      #475569;
  --text-muted:          #64748B;
  --text-light:          #94A3B8;
  --text-white:          #FFFFFF;

  /* Borders & Dividers */
  --border-subtle:       #E2E8F0;
  --border-medium:       #CBD5E1;
  --border-focus:        #0A256B;

  /* Typography */
  --font-sans:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing & Radii */
  --radius-sm:           6px;
  --radius:              10px;
  --radius-md:           12px;
  --radius-lg:           16px;
  --radius-xl:           24px;
  --radius-pill:         9999px;

  /* Shadows - Đa tầng tinh tế, chuẩn giao diện B2B cao cấp */
  --shadow-sm:           0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-card:         0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.06);
  --shadow-card-hover:   0 12px 30px -6px rgba(10, 37, 107, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
  --shadow-dropdown:     0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.08);

  /* Transitions */
  --transition-fast:     0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition:          0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:     0.4s cubic-bezier(0.16, 1, 0.3, 1);
}