/*
 * Loki Talk · generated design tokens
 * Source: /data/matrix/design-tokens/tokens/
 * Do NOT edit by hand — run `python3 build/scripts/build.py`.
 */

:root {
  --g-blur-light: blur(12px) saturate(140%);
  --g-blur: blur(28px) saturate(170%);
  --g-blur-strong: blur(48px) saturate(190%);
  --g-edge-soft: rgba(255,255,255,0.08);
  --g-edge: rgba(255,255,255,0.16);
  --g-edge-hi: rgba(255,255,255,0.28);
  --g-sheen: inset 0 1px 0 rgba(255,255,255,0.10);
  --g-sheen-hi: inset 0 1px 0 rgba(255,255,255,0.18);
  --g-shadow-sm: 0 2px 12px rgba(7,6,28,.32);
  --g-shadow-md: 0 6px 24px rgba(7,6,28,.42), inset 0 1px 0 rgba(255,255,255,0.10);
  --g-shadow-lg: 0 14px 48px rgba(7,6,28,.55), inset 0 1px 0 rgba(255,255,255,0.18);
  --g-shadow-xl: 0 28px 80px rgba(7,6,28,.65), inset 0 1px 0 rgba(255,255,255,0.18);
  --g-surface-0: rgba(255,255,255,0.025);
  --g-surface-1: rgba(255,255,255,0.045);
  --g-surface-2: rgba(255,255,255,0.075);
  --g-surface-3: rgba(255,255,255,0.110);
  --g-surface-sel: rgba(124, 92,255,0.220);
  --g-r-sm: 10px;
  --g-r: 16px;
  --g-r-lg: 22px;
  --g-r-xl: 28px;
  --g-r-pill: 999px;
  --g-r-bubble-in: 18px 18px 18px 4px;
  --g-r-bubble-out: 18px 18px 4px 18px;
  --g-ease: cubic-bezier(.22,.61,.36,1);
  --g-ease-out: cubic-bezier(.16,1,.3,1);
  --g-d-fast: 120ms;
  --g-d: 180ms;
  --g-d-slow: 320ms;
  --g-d-aurora: 60s;
  --g-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --g-font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --g-fs-xs: 11px;
  --g-fs-sm: 12px;
  --g-fs: 14px;
  --g-fs-md: 15px;
  --g-fs-lg: 16px;
  --g-fs-xl: 20px;
  --g-fs-h2: 28px;
  --g-fs-h1: 44px;
  --g-fw-regular: 400;
  --g-fw-medium: 500;
  --g-fw-semi: 600;
  --g-fw-bold: 700;
  --g-fw-black: 800;
  --g-text: #f5f3ff;
  --g-text-muted: rgba(245,243,255,0.72);
  --g-text-dim: rgba(245,243,255,0.48);
  --g-gray-100: #09080f;
  --g-gray-200: #0e0c18;
  --g-gray-300: #141220;
  --g-gray-400: #1a1828;
  --g-gray-500: #221f35;
  --g-gray-600: #2c2844;
  --g-gray-700: #3d3860;
  --g-gray-800: #564f80;
  --g-gray-900: #7068a0;
  --g-gray-1000: #9088c0;
  --g-gray-1100: #aea8d8;
  --g-gray-1200: #c8c4ea;
  --g-gray-1300: #dddaf5;
  --g-gray-1400: #edeaff;
  --g-alpha-200: rgba(255,255,255,.03);
  --g-alpha-300: rgba(255,255,255,.06);
  --g-alpha-400: rgba(255,255,255,.09);
  --g-alpha-700: rgba(255,255,255,.20);
  --g-alpha-1400: rgba(255,255,255,.94);
}

/* default palette: aurora-violet */
:root {
  --g-bg-base: #06061a;
  --g-bg-base-2: #0a0726;
  --g-bg-base-3: #0e0735;
  --g-aurora-1: #7c5cff;
  --g-aurora-2: #00d4ff;
  --g-aurora-3: #ff5cd6;
  --g-aurora-4: #5eead4;
  --g-accent: #7c5cff;
  --g-accent-2: #00d4ff;
  --g-accent-3: #ff5cd6;
  --g-accent-4: #5eead4;
  --g-accent-grad: linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%);
  --g-accent-grad-2: linear-gradient(135deg, #ff5cd6 0%, #7c5cff 100%);
  --g-bubble-in-bg: rgba(255,255,255,0.065);
  --g-bubble-in-border: rgba(255,255,255,0.13);
  --g-bubble-out-grad: linear-gradient(135deg, rgba(124,92,255,0.95) 0%, rgba(91,192,235,0.92) 100%);
  --g-bubble-out-border: rgba(255,255,255,0.20);
  --g-glow-violet: 0 0 32px rgba(124, 92,255,0.45);
  --g-glow-cyan: 0 0 32px rgba(  0,212,255,0.40);
  --g-glow-mint: 0 0 32px rgba( 94,234,212,0.40);
  --g-selection: rgba(124, 92,255,0.40);
}

/* palette: Aurora Violet — Default — violet → cyan with magenta and mint highlights */
[data-loki-palette="aurora-violet"], html[data-loki-palette="aurora-violet"] body {
  --g-bg-base: #06061a;
  --g-bg-base-2: #0a0726;
  --g-bg-base-3: #0e0735;
  --g-aurora-1: #7c5cff;
  --g-aurora-2: #00d4ff;
  --g-aurora-3: #ff5cd6;
  --g-aurora-4: #5eead4;
  --g-accent: #7c5cff;
  --g-accent-2: #00d4ff;
  --g-accent-3: #ff5cd6;
  --g-accent-4: #5eead4;
  --g-accent-grad: linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%);
  --g-accent-grad-2: linear-gradient(135deg, #ff5cd6 0%, #7c5cff 100%);
  --g-bubble-in-bg: rgba(255,255,255,0.065);
  --g-bubble-in-border: rgba(255,255,255,0.13);
  --g-bubble-out-grad: linear-gradient(135deg, rgba(124,92,255,0.95) 0%, rgba(91,192,235,0.92) 100%);
  --g-bubble-out-border: rgba(255,255,255,0.20);
  --g-glow-violet: 0 0 32px rgba(124, 92,255,0.45);
  --g-glow-cyan: 0 0 32px rgba(  0,212,255,0.40);
  --g-glow-mint: 0 0 32px rgba( 94,234,212,0.40);
  --g-selection: rgba(124, 92,255,0.40);
}

/* palette: Aurora Mint — Cool teal/cyan — closer to the legacy Loki Telegram skin */
[data-loki-palette="aurora-mint"], html[data-loki-palette="aurora-mint"] body {
  --g-bg-base: #04130f;
  --g-bg-base-2: #061a14;
  --g-bg-base-3: #082019;
  --g-aurora-1: #34d399;
  --g-aurora-2: #5eead4;
  --g-aurora-3: #22d3ee;
  --g-aurora-4: #a7f3d0;
  --g-accent: #34d399;
  --g-accent-2: #5eead4;
  --g-accent-3: #22d3ee;
  --g-accent-4: #a7f3d0;
  --g-accent-grad: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
  --g-accent-grad-2: linear-gradient(135deg, #5eead4 0%, #34d399 100%);
  --g-bubble-in-bg: rgba(255,255,255,0.065);
  --g-bubble-in-border: rgba(110,231,183,0.18);
  --g-bubble-out-grad: linear-gradient(145deg, rgba(5,90,60,.78) 0%, rgba(10,120,80,.72) 100%);
  --g-bubble-out-border: rgba(52,211,153,0.32);
  --g-glow-violet: 0 0 32px rgba(52,211,153,0.40);
  --g-glow-cyan: 0 0 32px rgba(34,211,238,0.40);
  --g-glow-mint: 0 0 32px rgba(167,243,208,0.40);
  --g-selection: rgba(52,211,153,0.40);
}

/* palette: Mono Graphite — Calm, neutral — no aurora, no glow. Best for low-vision users. */
[data-loki-palette="mono-graphite"], html[data-loki-palette="mono-graphite"] body {
  --g-bg-base: #0c0c10;
  --g-bg-base-2: #101015;
  --g-bg-base-3: #15151b;
  --g-aurora-1: #000000;
  --g-aurora-2: #000000;
  --g-aurora-3: #000000;
  --g-aurora-4: #000000;
  --g-accent: #cfd1d6;
  --g-accent-2: #9aa0a6;
  --g-accent-3: #cfd1d6;
  --g-accent-4: #9aa0a6;
  --g-accent-grad: linear-gradient(135deg, #cfd1d6 0%, #9aa0a6 100%);
  --g-accent-grad-2: linear-gradient(135deg, #9aa0a6 0%, #cfd1d6 100%);
  --g-bubble-in-bg: rgba(255,255,255,0.06);
  --g-bubble-in-border: rgba(255,255,255,0.14);
  --g-bubble-out-grad: linear-gradient(135deg, rgba(207,209,214,0.92) 0%, rgba(154,160,166,0.88) 100%);
  --g-bubble-out-border: rgba(255,255,255,0.22);
  --g-glow-violet: 0 0 0 rgba(0,0,0,0);
  --g-glow-cyan: 0 0 0 rgba(0,0,0,0);
  --g-glow-mint: 0 0 0 rgba(0,0,0,0);
  --g-selection: rgba(207,209,214,0.40);
}

/* palette: Sunset Magenta — Warm magenta + amber, dramatic contrast */
[data-loki-palette="sunset-magenta"], html[data-loki-palette="sunset-magenta"] body {
  --g-bg-base: #1a0613;
  --g-bg-base-2: #22081a;
  --g-bg-base-3: #2a0a22;
  --g-aurora-1: #ff5cd6;
  --g-aurora-2: #ff7a59;
  --g-aurora-3: #a020f0;
  --g-aurora-4: #ffb558;
  --g-accent: #ff5cd6;
  --g-accent-2: #ff7a59;
  --g-accent-3: #a020f0;
  --g-accent-4: #ffb558;
  --g-accent-grad: linear-gradient(135deg, #ff5cd6 0%, #ff7a59 100%);
  --g-accent-grad-2: linear-gradient(135deg, #a020f0 0%, #ff5cd6 100%);
  --g-bubble-in-bg: rgba(255,255,255,0.06);
  --g-bubble-in-border: rgba(255,200,220,0.18);
  --g-bubble-out-grad: linear-gradient(135deg, rgba(255,92,214,0.92) 0%, rgba(255,122,89,0.88) 100%);
  --g-bubble-out-border: rgba(255,255,255,0.22);
  --g-glow-violet: 0 0 32px rgba(255, 92,214,0.45);
  --g-glow-cyan: 0 0 32px rgba(255,122, 89,0.40);
  --g-glow-mint: 0 0 32px rgba(255,181, 88,0.40);
  --g-selection: rgba(255, 92,214,0.40);
}