/* javis-default-mode: light */
/* TRANOVA Branding Guideline v1.0 (12.10.2026): xanh mực #202D45, trắng lạnh #FAFBFD,
   tím xám nhạt #E3E4EF, periwinkle #929DD2. Font: Cormorant Garamond (tiêu đề), Manrope (nội dung).
   Các sắc phái sinh (tối, ink-text, viền) được suy từ 4 màu gốc để đủ độ tương phản, không phải màu duyệt thêm. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap&subset=vietnamese");

:root, :root[data-theme="light"] {
  --font: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-chat: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

/* ---------- TÔNG SÁNG (mặc định, đúng hướng "sáng sạch") ---------- */
:root[data-theme="light"] {
  --bg: #FAFBFD;
  --bg2: #FFFFFF;
  --bg3: #E3E4EF;
  --border: #D3D6E6;
  --accent: #929DD2;
  --accent2: #202D45;
  --text: #202D45;
  --text2: #3B4866;
  --text3: #5A6585;
  --text-hi: #131C2E;
  --accent-ink: #4A5799;
  --accent2-ink: #202D45;
  --accent-solid: #202D45;
  --green: #2C7A4B;
  --red: #C0392B;
  --yellow: #8A5A12;

  --surface-1: rgba(32, 45, 69, 0.03);
  --surface-2: rgba(32, 45, 69, 0.055);
  --surface-3: rgba(32, 45, 69, 0.09);
  --hairline: rgba(32, 45, 69, 0.11);
  --sunken: rgba(32, 45, 69, 0.04);

  --shadow-1: 0 2px 8px rgba(32, 45, 69, 0.07);
  --shadow-2: 0 8px 24px rgba(32, 45, 69, 0.10);
  --shadow-3: 0 22px 58px rgba(32, 45, 69, 0.16);
  --shadow-veil: rgba(32, 45, 69, 0.16);

  --accent-wash: rgba(146, 157, 210, 0.12);
  --accent-wash-2: rgba(146, 157, 210, 0.22);
  --accent-line: rgba(146, 157, 210, 0.55);
  --accent-ring: 0 0 0 3px rgba(146, 157, 210, 0.30);
  --accent2-wash: rgba(32, 45, 69, 0.07);
  --accent2-wash-2: rgba(32, 45, 69, 0.12);
  --accent2-line: rgba(32, 45, 69, 0.30);

  --field-bg: #FFFFFF;
  --panel-bg: rgba(255, 255, 255, 0.92);
  --panel-solid: #FFFFFF;
  --scrim: rgba(32, 45, 69, 0.38);

  --info-ink: #34437A;
  --info-wash: rgba(146, 157, 210, 0.14);
  --info-line: rgba(146, 157, 210, 0.50);
  --link-ink: #4A5799;
  --on-accent: #FAFBFD;

  --code-bg: #F1F2F8;
  --code-ink: #202D45;
  --tok-c: #6A7392;
  --tok-k: #4A5799;

  --brain-bg: radial-gradient(ellipse 58% 54% at 50% 43%,
      rgba(146, 157, 210, 0.20) 0%, rgba(146, 157, 210, 0.08) 34%,
      rgba(255, 255, 255, 0) 72%),
    linear-gradient(176deg, #FFFFFF 0%, #FAFBFD 46%, #E3E4EF 100%);
  --brain-vignette: radial-gradient(ellipse 74% 74% at 50% 43%,
    transparent 40%, rgba(227, 228, 239, 0.6) 100%);
  --brain-glass: rgba(255, 255, 255, 0.88);
  --brain-glass-brd: rgba(32, 45, 69, 0.14);
  --brain-glass-shadow: 0 6px 20px rgba(32, 45, 69, 0.11);
  --brain-ink: #202D45;
  --brain-ink2: #5A6585;
  --brain-ink-hot: #4A5799;
}

/* ---------- TÔNG TỐI: nền là xanh mực, nhấn periwinkle ---------- */
:root:not([data-theme="light"]) {
  --bg: #121A2B;
  --bg2: #182236;
  --bg3: #202D45;
  --border: #2D3B59;
  --accent: #929DD2;
  --accent2: #E3E4EF;
  --text: #FAFBFD;
  --text2: #E3E4EF;
  --text3: #A5AED3;
  --text-hi: #FFFFFF;
  --accent-ink: #B4BCE3;
  --accent2-ink: #E3E4EF;
  --accent-solid: #929DD2;

  --accent-wash: rgba(146, 157, 210, 0.10);
  --accent-wash-2: rgba(146, 157, 210, 0.18);
  --accent-line: rgba(146, 157, 210, 0.38);
  --accent-ring: 0 0 18px rgba(146, 157, 210, 0.22);
  --accent2-wash: rgba(227, 228, 239, 0.08);
  --accent2-wash-2: rgba(227, 228, 239, 0.14);
  --accent2-line: rgba(227, 228, 239, 0.30);

  --field-bg: rgba(18, 26, 43, 0.85);
  --panel-bg: rgba(18, 26, 43, 0.80);
  --panel-solid: rgba(14, 21, 36, 0.97);
  --on-accent: #121A2B;

  --info-ink: #DDE1F5;
  --info-wash: rgba(32, 45, 69, 0.85);
  --info-line: rgba(146, 157, 210, 0.40);
  --link-ink: #B4BCE3;

  --code-bg: #0E1524;
  --code-ink: #E3E4EF;

  --brain-bg: radial-gradient(ellipse 55% 55% at 50% 48%,
    rgba(146, 157, 210, 0.22) 0%, rgba(32, 45, 69, 0.20) 34%,
    rgba(18, 26, 43, 0.05) 56%, #0B111E 78%);
  --brain-vignette: radial-gradient(ellipse 70% 70% at 50% 46%,
    transparent 45%, rgba(8, 12, 22, 0.55) 100%);
  --brain-glass: rgba(24, 34, 54, 0.60);
  --brain-glass-brd: rgba(146, 157, 210, 0.36);
  --brain-ink: #E3E4EF;
  --brain-ink2: #929DD2;
  --brain-ink-hot: #B4BCE3;
}

/* ---------- Kiểu chữ: tiêu đề Cormorant Garamond, nội dung Manrope ---------- */
body { font-family: var(--font); font-weight: 400; }
h1, h2, h3, .brand-text, .noti-title, .page-title, .gcard-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em;
}
.brand-text { font-weight: 700; letter-spacing: 3px; }

/* ---------- Dọn các chỗ code gốc gõ cứng màu cam: đổi sang periwinkle ---------- */
.rail-brand .brand-mark { filter: drop-shadow(0 0 8px rgba(146, 157, 210, 0.55)); }
.gcard.current { box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(146, 157, 210, 0.22); }
.mic-big.handsfree { box-shadow: 0 0 0 2px var(--accent-line), 0 0 10px rgba(146, 157, 210, 0.40); }
@keyframes micpulse-hf { 50% { box-shadow: 0 0 0 7px rgba(146, 157, 210, 0); } }

/* ---------- Đợt 2: xoá nốt cam còn lại, sang xanh xám tím ---------- */
:root { --tok-n: #B4BCE3; --tok-a: #929DD2; --pet-face: #929DD2; --pet-ring: #E3E4EF; }
:root[data-theme="light"] { --tok-n: #4A5799; --tok-a: #5A6585; --pet-face: #202D45; --pet-ring: #929DD2; }
.ws-seg button.on, .ws-item.on, .ws-btn.primary { border-color: var(--accent-line); background: var(--accent-wash-2); }
.ws-step.dang { border-color: var(--accent-line); background: var(--accent-wash); }
.ws-tag-note.loi { background: var(--accent-wash); }
.ws-item.on, .ws-tag-note.loi { color: var(--text); }
.notification-badge { box-shadow: 0 0 10px rgba(146, 157, 210, 0.55); }
.noti-card.unread::before { box-shadow: 0 0 8px rgba(146, 157, 210, 0.75); }
@keyframes tlPulseLight {
  0%, 100% { box-shadow: var(--brain-glass-shadow), 0 0 0 0 rgba(146, 157, 210, .30); }
  50% { box-shadow: var(--brain-glass-shadow), 0 0 0 4px rgba(146, 157, 210, .20); }
}
.ws-wait { border-color: var(--accent-line); background: var(--accent-wash); }