/* ============================================================
   DESIGN TOKENS — GoBuddy
   Giá trị mặc định ở đây = giao diện "NEON 1.0".
   Mỗi giao diện (theme) khác chỉ ghi đè token trong css/themes/<tên>.css
   qua selector :root[data-theme="<tên>"]. Token nào không ghi đè → fallback về đây.
   ⚠️ MỌI màu/hiệu ứng phải qua var(--…) — không hard-code trong file khác.
   ============================================================ */

:root {
  /* --- Bản sắc GoBuddy (Brand Kit — CỐ ĐỊNH, theme KHÔNG ghi đè) ---
     Chỉ dùng cho wordmark/logo/asset thương hiệu; màu giao diện vẫn theo token theme bên dưới. */
  --brand-violet:  #8A3FFC;
  --brand-magenta: #FF4ADB;
  --brand-cyan:    #00D4FF;
  --brand-pink:    #FF7AD9;
  --brand-ink:     #0B0F1C;

  /* --- Background layers --- */
  --bg:       #120F26;
  --bg2:      #1A1538;
  --surface:  #221C44;
  --surface2: #2B2456;

  /* --- Border colors --- */
  --line:      #3A3270;
  --line-soft: #2E2860;

  /* --- Text --- */
  --ink:   #F3F0FF;
  --muted: #A6A0D0;
  --faint: #6E689A;
  --ink-soft: #D9D4F5;   /* chữ phụ sáng (tint lavender) */

  /* --- Brand / accent --- */
  --pink:   #FF5C8A;
  --pink2:  #FF87AE;
  --cyan:   #43E8D8;
  --gold:   #FFC857;
  --violet: #9B6BFF;
  --green:  #3DDC8B;
  --red:    #FF6B6B;

  /* Accent phụ / điểm cuối gradient */
  --cyan2:    #3AB0FF;   /* gradient cyan → xanh */
  --gold2:    #FF9F45;   /* gradient gold → cam */
  --violet2:  #7A5BFF;   /* violet đậm */
  --pink-hot: #FF6B9D;   /* pink rực (badge HOT) */

  /* Chữ đặt TRÊN nền accent sáng (đảm bảo tương phản) */
  --on-accent: #FFFFFF;  /* trên pink/violet/red/green */
  --on-cyan:   #06121A;  /* trên cyan */
  --on-gold:   #3A2400;  /* trên gold */

  /* Tint sáng của accent (chữ/nhãn trên nền tối) */
  --pink-tint:   #FFB3C6;
  --cyan-tint:   #BFEFE9;
  --gold-tint:   #F0DDB0;
  --green-tint:  #8FF0CD;
  --red-tint:    #FFB3B3;
  --violet-tint: #C9BCFF;
  --gold-tint2:  #FFCF9A;
  --orange-tint: #FFB36B;
  --ink-soft2:   #E0D6F5;
  --surface3:    #2C2556;   /* bề mặt tím trung gian */

  /* --- RGB triplets (dùng cho rgba(var(--x-rgb), α)) --- */
  --pink-rgb:     255,92,138;
  --pink2-rgb:    255,135,174;
  --cyan-rgb:     67,232,216;
  --gold-rgb:     255,200,87;
  --violet-rgb:   155,107,255;
  --violet2-rgb:  122,91,255;
  --green-rgb:    61,220,139;
  --red-rgb:      255,107,107;
  --bg-rgb:       18,15,38;
  --bg2-rgb:      26,21,56;
  --surface-rgb:  34,28,68;
  --surface2-rgb: 43,36,86;
  --ink-rgb:      243,240,255;

  /* Neutrals cho bóng & vệt sáng (theme sáng có thể đảo) */
  --shadow-rgb: 0,0,0;       /* màu bóng đổ */
  --hl-rgb:     255,255,255; /* vệt sáng / highlight trên bề mặt */
  --scrim-rgb:  8,6,20;      /* lớp phủ tối (overlay/lightbox) */

  /* --- Item rarity colors --- */
  --r-common: #5FE6D6;
  --r-rare:   #5B9BFF;
  --r-epic:   #C56BFF;
  --r-legend: #FFC857;

  /* --- Layout dimensions --- */
  --sidebar-w: 248px;
  --topbar-h:  65px;

  /* --- Radius scale (theme đổi được "độ bo") --- */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* --- Elevation / shadow presets --- */
  --shadow-sm: 0 2px 8px -2px rgba(var(--shadow-rgb), .4);
  --shadow-md: 0 8px 24px -8px rgba(var(--shadow-rgb), .5);
  --shadow-lg: 0 24px 70px -20px rgba(var(--shadow-rgb), .6);

  /* --- Effects: cường độ glow neon + độ mờ kính --- */
  --glow:      .5;    /* hệ số đậm của quầng sáng accent (theme SaaS hạ thấp) */
  --blur:      14px;  /* độ mờ glass */
  --blur-soft: 8px;

  /* --- Typography --- */
  --font-main: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', monospace;

  /* --- Transitions --- */
  --ease: .18s ease;
}