:root {
  --page-bg:          #020204;
  --text-main:        #FFFFFF;
  --text-body:        #AAAAB5;
  --text-muted:       #96969F;

  --red:              #FF2D1C;
  --red-soft:         rgba(255, 45, 28, 0.18);
  --pink:             #FF0091;
  --pink-soft:        rgba(255, 0, 145, 0.14);
  --mix-soft:         rgba(255, 65, 100, 0.06);

  --glass-bg:         rgba(255, 255, 255, 0.045);
  --glass-card:       rgba(255, 255, 255, 0.035);
  --glass-bg-strong:  rgba(255, 255, 255, 0.065);
  --glass-border:     rgba(255, 255, 255, 0.18);
  --glass-highlight:  rgba(255, 255, 255, 0.16);
  --glass-shadow:     rgba(0, 0, 0, 0.45);

  --tag-bg:           rgba(255, 255, 255, 0.035);
  --tag-border:       rgba(255, 255, 255, 0.14);

  --label:            #FF766D;

  --accent-soft:      #FFAAA0;
  --accent-rose:      #FF4B9A;

  --grad-head:        linear-gradient(100deg, #FFFFFF 18%, #FFAAA0 58%, #FF4B9A);
  --grad-btn:         linear-gradient(120deg, rgba(255,45,28,0.14), rgba(255,0,145,0.12));
  --grad-btn-hover:   linear-gradient(120deg, rgba(255,65,45,0.20), rgba(255,0,160,0.18));
  --grad-btn-border:       rgba(255,145,150,0.36);
  --grad-btn-border-hover: rgba(255,160,165,0.48);
  --grad-btn-glow:         0 14px 40px rgba(255,35,90,0.20);

  --blur:             34px;

  --r-nav:    22px;
  --r-navbtn: 12px;
  --r-button: 15px;
  --r-card:   23px;
  --r-tag:    8px;
  --r-panel:  23px;
  --r-round:  40px;

  --radius-sm:  10px;
  --radius-md:  15px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-xxl: 34px;

  --f-display: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  --f-body:    Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

  --accent:           var(--red);
  --accent-strong:    var(--red);
  --accent-pink:      var(--pink);
  --wash-red:         var(--red-soft);
  --wash-pink:        var(--pink-soft);
  --wash-mix:         var(--mix-soft);

  --bg:         var(--page-bg);
  --bg-2:       var(--page-bg);
  --bg-3:       var(--page-bg);
  --bg-soft:    var(--tag-bg);

  --card:       var(--glass-card);
  --card-solid: var(--glass-card);
  --panel:      var(--glass-bg-strong);

  --line:       var(--glass-border);
  --line-soft:  var(--tag-border);

  --purple:       var(--red);
  --purple-2:     var(--red);
  --purple-light: var(--label);
  --pink-legacy:  var(--pink);

  --accent-red:       var(--red);
  --accent-red-light: var(--label);
  --accent-purple:    var(--red);
  --accent-magenta:   var(--pink);

  --text:    var(--text-main);
  --muted:   var(--text-body);
  --muted-2: var(--text-muted);

  --text-primary:   var(--text-main);
  --text-secondary: var(--text-body);
  --text-dim:       var(--text-muted);

  --glass-light:       var(--glass-bg);
  --glass-medium:      var(--glass-bg-strong);
  --glass-strong:      var(--glass-bg-strong);
  --glass-border-soft: var(--tag-border);
  --shadow-glass:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 30px 90px rgba(0,0,0,0.40);

  --radius:    var(--r-card);
  --radius-lg: var(--r-card);
  --container: 1250px;
}

html.theme-light,
body.theme-light {
  --page-bg:          #CFD3DA;
  --text-main:        #202229;
  --text-body:        #4D5159;
  --text-muted:       #5F636B;

  --red:              #B94B43;
  --pink:             #C33E82;
  --red-soft:         rgba(255, 70, 55, 0.10);
  --pink-soft:        rgba(235, 60, 145, 0.09);
  --mix-soft:         rgba(224, 50, 80, 0.05);

  --glass-bg:         rgba(235, 238, 243, 0.28);
  --glass-card:       rgba(235, 238, 243, 0.27);
  --glass-bg-strong:  rgba(235, 238, 243, 0.48);
  --glass-border:     rgba(255, 255, 255, 0.48);
  --glass-highlight:  rgba(255, 255, 255, 0.68);
  --glass-shadow:     rgba(45, 50, 60, 0.16);

  --tag-bg:           rgba(235, 238, 243, 0.27);
  --tag-border:       rgba(255, 255, 255, 0.48);

  --label:            #B8443B;
  --accent-soft:      #B94B43;
  --accent-rose:      #C33E82;

  --grad-head:        linear-gradient(100deg, #25262A 18%, #B94B43 58%, #C33E82);
  --grad-btn:         linear-gradient(120deg, rgba(255,100,80,0.13), rgba(255,80,160,0.10));
  --grad-btn-hover:   linear-gradient(120deg, rgba(255,100,80,0.20), rgba(255,80,160,0.17));
  --grad-btn-border:       rgba(255,255,255,0.55);
  --grad-btn-border-hover: rgba(255,255,255,0.70);
  --grad-btn-glow:         0 14px 40px rgba(45,50,60,0.14);

  --shadow-glass:
    inset 0 1px 0 rgba(255,255,255,0.68),
    0 24px 70px rgba(45,50,60,0.16);
}

* { box-sizing: border-box; }

html {
  background: var(--page-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  background: transparent;
  color: var(--text-main);
  font-family: var(--f-body);
  overflow-x: hidden;
  transition: background .45s ease, color .45s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .logo-text { font-family: var(--f-display); }

::selection { background: rgba(255,45,28,.32); color: #fff; }
body.theme-light ::selection { background: rgba(224,38,23,.26); color: #1c1e23; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.grad {
  background: var(--grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.theme-light .grad {
  background: var(--grad-head);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}