:root {
  --color-bg: #14161A;
  --color-bg-soft: #09070f;
  --color-panel: #111216;
  --color-card: #1A1D23;
  --color-overlay: rgba(0, 0, 0, 0.62);
  --color-surface-sub: rgba(255, 255, 255, 0.06);
  --color-balance-bg: rgba(0, 0, 0, 0.72);
  --color-text: #f8f6ff;
  --color-text-muted: rgba(248, 246, 255, 0.72);
  --color-text-soft: rgba(248, 246, 255, 0.52);
  --color-white: #ffffff;
  --color-muted: #a49ab8;
  --color-hero-cta: #ffffff;
  --color-divider: rgba(255, 255, 255, 0.07);
  /* Pink-purple accent system */
  --color-accent: #e977d4;
  --color-accent-mid: #E06BCB;
  --color-accent-to: #B86AD4;
  --color-accent-light: #ff74d4;
  --color-accent-subtle: rgba(243, 106, 169, 0.86);
  --gradient-primary: linear-gradient(135deg, #E06BCB 0%, #b670d0 48%, #B86AD4 100%);
  --gradient-primary-soft: linear-gradient(135deg, #f084dc 0%, #cc87e5 50%, #cd82e8 100%);
  --gradient-panel-accent: linear-gradient(135deg, rgba(243, 106, 169, 0.06) 0%, rgba(0, 0, 0, 0.35) 100%);
  --gradient-hero-bg: radial-gradient(circle at 85% 48%, rgba(155, 77, 255, 0.18) 0%, rgba(155, 77, 255, 0) 38%),
                           linear-gradient(180deg, #050508 0%, #050508 78%, #09070f 100%);
  --gradient-hero-img: linear-gradient(90deg, #050508 0%, rgba(5, 5, 8, 0.9) 35%, rgba(5, 5, 8, 0.3) 72%, #050508 100%),
                           linear-gradient(180deg, rgba(5, 5, 8, 0) 55%, #050508 100%);
  --color-border-soft: rgba(255, 116, 212, 0.14);
  --color-border-accent: rgba(255, 116, 212, 0.42);
  --color-border-strong: rgba(225, 76, 199, 0.65);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-mid: rgba(255, 255, 255, 0.12);
  --pin-gradient: linear-gradient(135deg, #e263cb 0%, #ae5bcd 48%, #a84aca 100%);
  /* Tab palette */
  --tab-bg-hover: linear-gradient(135deg, rgba(255, 116, 212, 0.08) 0%, rgba(255, 116, 212, 0.01) 100%);
  --tab-bg-active: linear-gradient(135deg, rgba(255, 116, 212, 0.14) 0%, rgba(255, 116, 212, 0.01) 100%);
  --tab-text: var(--color-muted);
  --tab-text-hover: #f8f6ff;
  --tab-text-active: #ff74d4;
  --tab-border: rgba(255, 255, 255, 0.07);
  --tab-border-hover: rgba(255, 116, 212, 0.26);
  --tab-border-active:rgba(255, 116, 212, 0.62);
  /* Tag / chip palette */
  --tag-bg: #1A1D23;
  --tag-bg-hover: #22262D;
  --tag-bg-active: rgba(255, 116, 212, 0.12);
  --tag-text: #a49ab8;
  --tag-text-hover: #f8f6ff;
  --tag-text-active: #ff74d4;
  --tag-border: rgba(255,255,255,0.06);
  --tag-border-hover: rgba(255, 116, 212, 0.26);
  --tag-border-active:rgba(255, 116, 212, 0.62);
  /* Button states */
  --btn-shadow-default: rgba(225, 76, 199, 0.35);
  --btn-shadow-hover: rgba(225, 76, 199, 0.52);
  --btn-shadow-active: rgba(225, 76, 199, 0.24);
  --btn-disabled-bg: #262230;
  --btn-disabled-text: #6b647a;
  /* Glow */
  --color-glow-accent: rgba(255, 77, 179, 0.38);
  --color-glow-soft: rgba(155, 77, 255, 0.18);
  --font-main: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Manrope", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Manrope", system-ui, sans-serif;
  --fs-xxs: 7px;
  --fs-xs: 8px;
  --fs-2xs: 10px;
  --fs-sm: 11px;
  --fs-base: 13px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 17px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-close: 38px;
  --fs-hero: 37px;
  --fs-section-title: 26px;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --container-padding: 14px;
  --header-height: 72px;
  --menu-width: 310px;
  --radius-2xs: 4px;
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-circle: 16px;
  --radius-pill: 999px;
  --shadow-coin: 0 0 10px rgba(225, 76, 199, 0.35);
  --shadow-coin-lg: 0 0 14px rgba(225, 76, 199, 0.4);
  --shadow-balance: inset 0 0 18px rgba(155, 77, 255, 0.08), 0 0 14px rgba(225, 76, 199, 0.1);
  --shadow-panel: -18px 0 45px rgba(0, 0, 0, 0.7);
  --shadow-hero-btn: 0 12px 28px rgba(225, 76, 199, 0.35);
  --sidebar-width: 0px;
  --transition: 0.2s ease;
  --menu-duration-open: 0.48s;
  --menu-duration-close: 0.32s;
  --menu-ease-open: cubic-bezier(0.16, 1, 0.3, 1);
  --menu-ease-close: cubic-bezier(0.4, 0, 1, 1);
}
