/* Token thiết kế v4 — CTV xanh ngọc, khách hổ phách. Mobile 375 / 390 / 430. */

:root {
  --color-primary: #7c6af5;
  --color-primary-hover: #6b59e8;
  --color-primary-soft: rgba(124, 106, 245, 0.2);
  --color-accent: #e8b86d;
  --color-accent-soft: rgba(232, 184, 109, 0.18);
  --color-danger: #f07178;
  --color-danger-soft: rgba(240, 113, 120, 0.16);

  --color-ctv: #5ee0b5;
  --color-ctv-deep: #0f3d32;
  --color-user: #f0b27a;
  --color-user-deep: #3a2414;

  --color-bg: #120f18;
  --color-bg-elevated: #1b1624;
  --color-surface: #221c2e;
  --color-surface-2: #2c243c;
  --color-border: rgba(232, 220, 200, 0.12);
  --color-text: #f6f1e8;
  --color-muted: #c9bfb0;
  --color-faint: #a89c8c;
  --color-link: #c4b5fd;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  --radius-8: 8px;
  --radius-12: 14px;
  --radius-20: 22px;
  --radius-50: 50px;

  --shadow-sm: 0 1px 2px rgba(8, 6, 14, 0.4);
  --shadow-md: 0 12px 32px rgba(8, 6, 14, 0.45);
  --shadow-lg: 0 28px 64px rgba(8, 6, 14, 0.58);
  --gradient-primary: linear-gradient(145deg, #8b7cf7, #5b4cdb 52%, #2f2658);
  --gradient-ctv: linear-gradient(145deg, #6ee7c5, #14967a 58%, #0b3d32);
  --gradient-user: linear-gradient(145deg, #f6c38a, #d4893c 58%, #5a3014);

  --font: "Be Vietnam Pro", system-ui, sans-serif;
  --app-max: 430px;
  --header-h: 56px;
}

body.site-ctv,
body.role-ctv {
  --color-primary: #34d399;
  --color-primary-hover: #10b981;
  --color-primary-soft: rgba(52, 211, 153, 0.18);
  --color-link: #6ee7c5;
  --gradient-primary: var(--gradient-ctv);
}

body.site-user,
body.role-user {
  --color-primary: #f0b27a;
  --color-primary-hover: #e09a55;
  --color-primary-soft: rgba(240, 178, 122, 0.2);
  --color-link: #f0b27a;
  --gradient-primary: var(--gradient-user);
}