/* KOL.HK v3 design tokens. Loaded after theme css. */
:root {
  --c-accent: #38bdf8;
  --c-accent-2: #7dd3fc;
  --c-accent-3: #0ea5e9;
  --c-success: #10b981;
  --c-warning: #fbbf24;
  --c-danger: #f43f5e;
  --c-vip: #f59e0b;

  --d-bg-0: #0b1017;
  --d-bg-1: #0d1320;
  --d-bg-2: #111827;
  --d-bg-3: #1e293b;
  --d-bg-4: #243044;
  --d-text: #f1f5f9;
  --d-text-2: #cbd5e1;
  --d-muted: #94a3b8;
  --d-muted-2: #64748b;
  --d-border: rgba(248, 250, 252, 0.08);
  --d-border-2: rgba(248, 250, 252, 0.14);
  --d-border-strong: rgba(248, 250, 252, 0.22);

  --l-bg-0: #f8fafb;
  --l-bg-1: #ffffff;
  --l-bg-2: #f1f5f9;
  --l-bg-3: #e2e8f0;
  --l-bg-4: #cbd5e1;
  --l-text: #0f172a;
  --l-text-2: #334155;
  --l-muted: #475569;
  --l-muted-2: #64748b;
  --l-border: rgba(15, 23, 42, 0.08);
  --l-border-2: rgba(15, 23, 42, 0.14);
  --l-border-strong: rgba(15, 23, 42, 0.22);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  --fz-12: 12px;
  --fz-13: 13px;
  --fz-14: 14px;
  --fz-15: 15px;
  --fz-16: 16px;
  --fz-18: 18px;
  --fz-20: 20px;
  --fz-24: 24px;
  --fz-32: 32px;
  --fz-display: clamp(40px, 5vw, 72px);

  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-bounce: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-sans: "Inter", "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

:root,
html.dark {
  --bg-0: var(--d-bg-0);
  --bg-1: var(--d-bg-1);
  --bg-2: var(--d-bg-2);
  --bg-3: var(--d-bg-3);
  --bg-4: var(--d-bg-4);
  --text: var(--d-text);
  --text-2: var(--d-text-2);
  --muted: var(--d-muted);
  --muted-2: var(--d-muted-2);
  --border: var(--d-border);
  --border-2: var(--d-border-2);
  --border-strong: var(--d-border-strong);
  --text-on-accent: #06111a;
  --accent-soft: rgba(56, 189, 248, 0.16);
  --accent-softer: rgba(56, 189, 248, 0.08);
  --accent-strong: rgba(56, 189, 248, 0.42);
  --focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.18);
  --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.10);
  --shadow-2: 0 8px 22px rgba(0, 0, 0, 0.18);
  --shadow-3: 0 18px 45px rgba(0, 0, 0, 0.28);
  --shadow-accent: 0 12px 30px rgba(56, 189, 248, 0.18);
  --page-bg: radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.08), transparent 30rem), radial-gradient(circle at 86% 8%, rgba(14, 165, 233, 0.07), transparent 34rem), var(--bg-0);
  --panel-bg: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(13, 19, 32, 0.98));
  --surface-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(17, 24, 39, 0.94));
  --surface-raised: linear-gradient(180deg, rgba(36, 48, 68, 0.90), rgba(30, 41, 59, 0.94));
  --rail-bg: linear-gradient(180deg, rgba(56, 189, 248, 0.08), transparent 18rem), linear-gradient(180deg, #0e131c, #0a0e16);
  --chat-main-bg: radial-gradient(60% 46% at 52% -8%, rgba(56, 189, 248, 0.10), transparent 60%), linear-gradient(180deg, #0d1320, #0b1017);
  --active-bg: linear-gradient(90deg, rgba(56, 189, 248, 0.24), rgba(56, 189, 248, 0.08));
  --button-primary-bg: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  --button-primary-hover: linear-gradient(135deg, var(--c-accent-2), var(--c-accent));
  --bubble-sent-bg: linear-gradient(135deg, var(--c-accent), var(--c-accent-3));
  --bubble-recv-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(17, 24, 39, 0.94));
  --empty-card-bg: radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.18), transparent 42%), linear-gradient(145deg, rgba(17, 24, 39, 0.96), rgba(13, 19, 32, 0.96));
  --glass-bg: rgba(11, 16, 23, 0.72);
  --overlay-bg: rgba(8, 13, 20, 0.74);
  --vip-bg: linear-gradient(135deg, #fbbf24, #f59e0b);
  --room-cover-1: linear-gradient(135deg, #0ea5e9, #1e293b);
  --room-cover-2: linear-gradient(135deg, #38bdf8, #334155);
  --room-cover-3: linear-gradient(135deg, #10b981, #0f172a);
  --room-cover-4: linear-gradient(135deg, #f59e0b, #1e293b);
  --room-cover-5: linear-gradient(135deg, #f43f5e, #111827);
  --room-cover-6: linear-gradient(135deg, #7dd3fc, #0f172a);
}

html.light {
  --bg-0: var(--l-bg-0);
  --bg-1: var(--l-bg-1);
  --bg-2: var(--l-bg-2);
  --bg-3: var(--l-bg-3);
  --bg-4: var(--l-bg-1);
  --text: var(--l-text);
  --text-2: var(--l-text-2);
  --muted: var(--l-muted);
  --muted-2: var(--l-muted-2);
  --border: var(--l-border);
  --border-2: var(--l-border-2);
  --border-strong: var(--l-border-strong);
  --text-on-accent: #06111a;
  --accent-soft: rgba(14, 165, 233, 0.14);
  --accent-softer: rgba(14, 165, 233, 0.07);
  --accent-strong: rgba(14, 165, 233, 0.36);
  --focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.18);
  --shadow-1: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 10px 24px rgba(15, 23, 42, 0.10);
  --shadow-3: 0 18px 45px rgba(15, 23, 42, 0.14);
  --shadow-accent: 0 12px 28px rgba(14, 165, 233, 0.14);
  --page-bg: radial-gradient(circle at 18% 0%, rgba(14, 165, 233, 0.10), transparent 30rem), radial-gradient(circle at 86% 10%, rgba(125, 211, 252, 0.18), transparent 34rem), var(--bg-0);
  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 251, 0.98));
  --surface-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.96));
  --surface-raised: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98));
  --rail-bg: linear-gradient(180deg, rgba(14, 165, 233, 0.08), transparent 18rem), linear-gradient(180deg, #ffffff, #eef5fb);
  --chat-main-bg: radial-gradient(60% 46% at 52% -8%, rgba(14, 165, 233, 0.11), transparent 60%), linear-gradient(180deg, #f8fafb, #eef3f8);
  --active-bg: linear-gradient(90deg, rgba(14, 165, 233, 0.18), rgba(14, 165, 233, 0.06));
  --button-primary-bg: linear-gradient(135deg, var(--c-accent-3), var(--c-accent));
  --button-primary-hover: linear-gradient(135deg, var(--c-accent), var(--c-accent-3));
  --bubble-sent-bg: linear-gradient(135deg, var(--c-accent-3), var(--c-accent));
  --bubble-recv-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98));
  --empty-card-bg: radial-gradient(circle at 20% 0%, rgba(14, 165, 233, 0.16), transparent 42%), linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.96));
  --glass-bg: rgba(255, 255, 255, 0.72);
  --overlay-bg: rgba(15, 23, 42, 0.35);
  --vip-bg: linear-gradient(135deg, #fbbf24, #f59e0b);
}

:root,
html.dark,
html.light,
body.incallx {
  --kol-accent: var(--c-accent);
  --kol-accent-2: var(--c-accent-2);
  --kol-surface-0: var(--bg-0);
  --kol-surface-1: var(--bg-1);
  --kol-surface-2: var(--bg-2);
  --kol-surface-3: var(--bg-3);
  --kol-text: var(--text);
  --kol-muted: var(--muted);
  --kol-muted-2: var(--muted-2);
  --kol-border: var(--border);
  --kol-border-strong: var(--border-2);
  --dark-bg: var(--bg-1);
  --darker-bg: var(--bg-0);
  --sent-background: var(--c-accent);
  --sent-color: var(--text-on-accent);
  --received-background: var(--bg-3);
  --received-color: var(--text);
  --input-bg: var(--bg-4);
  --default-text-color: var(--text);
  --brand: var(--c-accent);
  --brand-hover: var(--c-accent-2);
  --brand-soft: var(--accent-soft);
  --brand-glow: var(--accent-strong);
  --brand-on: var(--text-on-accent);
  --accent: var(--c-accent-2);
  --ds-text: var(--text);
  --ds-muted: var(--muted);
  --ds-accent: var(--c-accent);
  --ds-bg-0: var(--bg-0);
  --ds-bg-1: var(--bg-1);
  --ds-border: var(--border);
  --ds-border-strong: var(--border-2);
  --ds-shadow: var(--shadow-3);
  --ds-rpanel-surface: var(--accent-softer);
  --ds-rpanel-surface-strong: var(--accent-soft);
  --ds-rpanel-border: var(--border);
  --ds-rpanel-border-strong: var(--border-2);
  --ds-rpanel-text: var(--text);
  --ds-rpanel-muted: var(--muted);
}