/* ======================================================================
   STUFFY / THEME CONTROL PANEL
   ======================================================================
   This is the main file to edit. Change any value on the right side of a
   colon. The layout in style.css reads these custom properties.
   You do NOT need to edit the HTML to recolour/re-style the whole site.

   QUICK START:
   1. Edit --accent-cyan, --accent-blue, --accent-pink, --accent-purple.
   2. Edit --bg-base, --surface, --text-primary for dark/light balance.
   3. Edit --radius-* and --shadow-* for shape and depth.
   4. Edit social colour tokens and motion settings below.
   ====================================================================== */

:root {
  /* 01 — BRAND COLOURS */
  --accent-cyan: #77ffff;
  --accent-blue: #0000ff;
  --accent-pink: #ff77ff;
  --accent-purple: #7700ff;
  --accent-ice: #bbffff;
  --logo-bg-pink: var(--accent-pink);
  --logo-bg-blue: var(--accent-blue);
  --logo-spin-speed: 24s;

  /* 02 — BACKGROUND & SURFACES */
  --bg-base: #0b0923;
  --bg-deep: #070617;
  --bg-spot-a: rgba(82, 46, 224, .24);
  --bg-spot-b: rgba(255, 96, 231, .14);
  --bg-spot-c: rgba(0, 183, 248, .10);
  --surface: #15122e;
  --surface-alt: #1b1738;
  --surface-hover: #242047;
  --surface-alpha: rgba(23, 19, 52, .82);
  --header-alpha: rgba(11, 9, 35, .80);
  --border: rgba(196, 187, 255, .14);
  --border-strong: rgba(196, 187, 255, .29);
  --hairline: rgba(255, 255, 255, .10);

  /* 03 — TEXT */
  --text-primary: #fbfaff;
  --text-secondary: #beb9db;
  --text-faint: #8c85ae;
  --text-on-bright: #0b0923;
  --font-body: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-mono: Consolas, 'Courier New', monospace;
  --font-base-size: 16px;
  --font-body-line: 1.65;
  --font-heading-line: 1.07;
  --font-heading-weight: 800;
  --letter-spacing-label: .15em;

  /* 04 — GRADIENT ENDPOINTS (replace whole gradients if desired) */
  --gradient-brand: linear-gradient(105deg, var(--accent-cyan) 0%, var(--accent-blue) 33%, var(--accent-purple) 67%, var(--accent-pink) 100%);
  --gradient-soft: linear-gradient(115deg, rgba(0,183,248,.16), rgba(155,91,255,.16) 55%, rgba(255,130,243,.16));
  --gradient-button: linear-gradient(110deg, var(--accent-cyan), #8086ff 47%, var(--accent-pink));
  --gradient-border: linear-gradient(120deg, rgba(0,183,248,.8), rgba(155,91,255,.55), rgba(255,130,243,.8));
  --gradient-server: linear-gradient(150deg, #24216c 0%, #17133b 65%, #241344 100%);

  /* 05 — LAYOUT & SPACING */
  --content-width: 1160px;
  --page-padding: clamp(18px, 4vw, 52px);
  --header-height: 82px;
  --section-gap: clamp(84px, 10vw, 140px);
  --grid-gap: 18px;
  --card-padding: 26px;
  --hero-image-max: 520px;
  --nav-gap: 28px;

  /* 06 — SHAPES / BORDERS */
  --radius-xs: 9px;
  --radius-sm: 14px;
  --radius-md: 21px;
  --radius-lg: 30px;
  --radius-xl: 38px;
  --radius-pill: 999px;
  --border-size: 1px;
  --icon-shape: 16px;

  /* 07 — SHADOWS & GLOWS */
  --shadow-card: 0 18px 54px rgba(3, 1, 15, .25);
  --shadow-card-hover: 0 24px 70px rgba(3, 1, 15, .40);
  --shadow-image: 0 36px 100px rgba(19, 9, 92, .52);
  --shadow-primary: 0 10px 32px rgba(133, 104, 252, .24);
  --glow-cyan: rgba(0, 183, 248, .24);
  --glow-pink: rgba(255, 130, 243, .24);
  --blur-header: 16px;

  /* 08 — BUTTON ENDPOINTS */
  --button-height: 52px;
  --button-padding-x: 24px;
  --button-radius: var(--radius-pill);
  --button-secondary-bg: rgba(255, 255, 255, .045);
  --button-secondary-border: var(--border-strong);
  --button-secondary-text: var(--text-primary);
  --button-hover-lift: -3px;

  /* 09 — ANIMATION ENDPOINTS */
  --motion-fast: 180ms;
  --motion-normal: 300ms;
  --motion-slow: 550ms;
  --motion-easing: cubic-bezier(.2,.8,.2,1);
  --hero-float-speed: 8s;      /* set to 0s to stop floating */
  --hero-float-range: -10px;   /* set to 0px to stop movement */
  --hover-lift: -5px;          /* set to 0px to stop lift */

  /* 10 — OPTIONAL TEXTURE */
  --grid-size: 56px;
  --grid-opacity: .025;
  --hero-decor-size: 520px;

/* 11 — SOCIAL CARD ACCENTS */
  --social-youtube: #ff565f;
  --social-twitch: #af84ff;
  --social-discord: #91a0ff;
  --social-instagram: #ff86bd;
  --social-bluesky: #50a6ff;
  --social-x: #e1e3f5;

  /* MUSIC PLATFORMS */
  --social-spotify: #1ed760;
  --social-amazon: #25c3f3;
  --social-deezer: #a35bff;
  --social-apple: #fa586a;
  --social-tidal: #d7d9e6;
}

/* OPTIONAL CLASS-LEVEL OVERRIDES:
   Want square cards? .social-card { border-radius: 0; }
   Want everything more compact? :root { --section-gap: 70px; }
   Want a completely still site? Set all motion values to 0ms and
   --hero-float-speed to 0s.
*/