/**
 * Mirrly TG Proxy — Design Tokens & Theme Variables
 * Ultra-Premium AMOLED Design System (#000000 True Black)
 */

:root {
  /* --- AMOLED Pure Black Color Palette --- */
  --bg-amoled: #000000;
  --bg-surface-1: #0A0A0C;
  --bg-surface-2: #121215;
  --bg-surface-3: #1A1A1F;
  --bg-surface-4: #24242B;

  /* --- Zero-Fill Transparent UI with Crisp Neon Borders --- */
  --glass-bg: transparent;
  --glass-bg-subtle: transparent;
  --glass-bg-hover: transparent;
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-hover: var(--color-primary);
  --glass-border-active: var(--color-primary);
  --glass-blur: none;
  --shadow-card: none;
  --shadow-card-hover: 0 0 25px var(--color-primary-glow);

  /* --- Text & Contrast Hierarchy (WCAG AAA) --- */
  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D8;
  --text-muted: #8E8E98;
  --text-dim: #52525B;

  /* --- Dual Protocol Color Tokens --- */
  /* MTProto Palette (Emerald -> Cyan -> Sky) */
  --mtp-emerald: #00FF87;
  --mtp-cyan: #00F5D4;
  --mtp-sky: #00B4D8;
  --mtp-glow: rgba(0, 245, 212, 0.35);

  /* SOCKS5 Palette (Deep Violet -> Neon Purple) */
  --socks-deep: #7C4DFF;
  --socks-neon: #B388FF;
  --socks-purple: #C084FC;
  --socks-glow: rgba(179, 136, 255, 0.35);

  /* Active Theme Variables (Default: Signature Emerald-to-Violet Gradient) */
  --color-primary: #00F5D4;
  --color-primary-glow: rgba(0, 245, 212, 0.35);
  --color-secondary: #7C4DFF;
  --color-secondary-glow: rgba(124, 77, 255, 0.35);
  --gradient-accent: linear-gradient(135deg, #00FF87 0%, #00F5D4 28%, #00B4D8 52%, #7C4DFF 78%, #B388FF 100%);
  --glow-active: 0 0 35px rgba(0, 245, 212, 0.35);

  /* --- Semantic Status Colors --- */
  --color-success: #00FF87;
  --color-warning: #FFB300;
  --color-error: #FF5252;
  --color-info: #00B4D8;

  /* --- Typography --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* --- Spacing & Radius Tokens --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme Modifiers */
[data-theme="mtproto"] {
  --color-primary: #00F5D4;
  --color-primary-glow: rgba(0, 245, 212, 0.4);
  --color-secondary: #00FF87;
  --color-secondary-glow: rgba(0, 255, 135, 0.35);
  --gradient-accent: linear-gradient(135deg, #00FF87 0%, #00F5D4 50%, #00B4D8 100%);
  --glow-active: 0 0 40px rgba(0, 245, 212, 0.4);
}

[data-theme="socks5"] {
  --color-primary: #B388FF;
  --color-primary-glow: rgba(179, 136, 255, 0.4);
  --color-secondary: #7C4DFF;
  --color-secondary-glow: rgba(124, 77, 255, 0.35);
  --gradient-accent: linear-gradient(135deg, #7C4DFF 0%, #C084FC 50%, #B388FF 100%);
  --glow-active: 0 0 40px rgba(179, 136, 255, 0.4);
}