:root {
   /* Backgrounds */
   --color-bg-primary: #111113;
   --color-bg-secondary: #1A1A1D;
   --color-bg-tertiary: #242428;
   --color-bg-hover: #2F2F34;
   --color-surface: #1F1F23;
   --color-overlay: rgba(24, 24, 27, 0.96);

   /* Brand */
   --color-brand-primary: #F06A42;
   --color-brand-secondary: #E34E6A;
   --color-brand-gradient: linear-gradient(90deg, #F06A42 0%, #E34E6A 100%);
   --color-accent: #A855F7;
   --color-success: #22C55E;

   /* Text */
   --color-text-primary: #FFFFFF;
   --color-text-secondary: #C8C8CC;
   --color-text-tertiary: #8E8E93;
   --color-text-disabled: #66666B;

   /* Border */
   --color-border-primary: #34343A;
   --color-border-secondary: #2A2A2F;
   --color-divider: rgba(255, 255, 255, 0.08);

   /* Buttons */
   --button-primary-bg: var(--color-brand-gradient);
   --button-primary-text: #FFFFFF;

   --button-secondary-bg: #26262B;
   --button-secondary-text: #FFFFFF;

   --button-ghost-bg: transparent;
   --button-ghost-text: #FFFFFF;

   /* Inputs */
   --input-bg: #1B1B1F;
   --input-border: #303036;
   --input-placeholder: #6D6D73;
   --input-text: #FFFFFF;

   /* Menu */
   --menu-bg: #232327;
   --menu-hover: #303036;
   --menu-active: #3A3A42;

   /* Tags */
   --tag-bg: #2B2B30;
   --tag-text: #FFFFFF;
   --tag-success-bg: rgba(34, 197, 94, 0.16);

   /* Sidebar */
   --sidebar-bg: #101012;
   --sidebar-item-hover: #26262B;
   --sidebar-item-active: rgba(240, 106, 66, 0.16);

   /* Radius */
   --radius-xs: 6px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 20px;
   --radius-pill: 999px;

   /* Spacing */
   --space-4: 4px;
   --space-8: 8px;
   --space-12: 12px;
   --space-16: 16px;
   --space-20: 20px;
   --space-24: 24px;
   --space-32: 32px;

   /* Typography */
   --font-family: "Inter", sans-serif;

   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-md: 16px;
   --font-size-lg: 18px;
   --font-size-xl: 24px;

   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* Shadow */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);
   --shadow-md: 0 8px 24px rgba(0, 0, 0, .32);
   --shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);

   /* Animation */
   --transition-fast: 120ms ease;
   --transition-base: 200ms ease;
   --transition-slow: 300ms ease;
}

@media (max-width: 1536px) {
   .nicname {
      display: none;
   }
}