/* ─── Studio theme (warm parchment / teal) ─────────────────────────────────── */
.theme-studio {
  /* text */
  --ink: #193531;
  --muted: rgba(25, 53, 49, 0.84);

  /* borders & shadows */
  --line: rgba(58, 108, 104, 0.18);
  --divider: rgba(58, 108, 104, 0.18);
  --surface-shadow: 0 18px 45px rgba(105, 78, 40, 0.14);

  /* background glows */
  --glow-a: rgba(79, 156, 149, 0.16);
  --glow-b: rgba(93, 121, 164, 0.1);

  /* page & section backgrounds */
  --page-bg:
    radial-gradient(circle at 8% 12%, rgba(79, 156, 149, 0.12), transparent 22rem),
    radial-gradient(circle at 94% 6%, rgba(122, 149, 196, 0.12), transparent 20rem),
    radial-gradient(circle at 50% 108%, rgba(212, 181, 119, 0.16), transparent 26rem),
    linear-gradient(180deg, #e4d3b3 0%, #d5bf99 52%, #c7ae84 100%);
  --header-surface: linear-gradient(145deg, rgba(246, 239, 223, 0.95), rgba(232, 219, 194, 0.93));
  --hero-surface:
    radial-gradient(circle at top right, rgba(79, 156, 149, 0.12), transparent 18rem),
    linear-gradient(145deg, rgba(243, 234, 214, 0.96), rgba(227, 212, 187, 0.93));
  --featured-surface:
    radial-gradient(circle at top left, rgba(79, 156, 149, 0.08), transparent 16rem),
    linear-gradient(145deg, rgba(239, 230, 211, 0.96), rgba(223, 205, 179, 0.93));
  --visual-surface:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18), transparent 8rem),
    radial-gradient(circle at 75% 18%, rgba(200, 190, 120, 0.16), transparent 10rem),
    radial-gradient(circle at 50% 88%, rgba(52, 167, 154, 0.14), transparent 10rem),
    linear-gradient(180deg, rgba(188, 211, 204, 0.95), rgba(224, 217, 190, 0.93) 52%, rgba(160, 191, 176, 0.94));
  --team-surface:
    radial-gradient(circle at top right, rgba(79, 156, 149, 0.08), transparent 16rem),
    linear-gradient(145deg, rgba(239, 232, 218, 0.96), rgba(223, 208, 184, 0.93));
  --panel-surface: linear-gradient(145deg, rgba(244, 236, 220, 0.95), rgba(226, 211, 187, 0.92));

  /* buttons */
  --button-primary-bg: linear-gradient(135deg, #287f78, #5ea7a0);
  --button-primary-ink: #f7fbf9;
  --button-secondary-bg: rgba(255, 251, 245, 0.56);
  --button-secondary-border: rgba(40, 127, 120, 0.24);
  --button-secondary-ink: #1c4541;

  /* accents */
  --eyebrow: #2c7972;
  --accent-1: #2f8f85;

  /* team cards */
  --team-card-2:
    radial-gradient(circle at top right, rgba(108, 160, 123, 0.14), transparent 13rem),
    linear-gradient(145deg, rgba(235, 241, 233, 0.98), rgba(213, 223, 209, 0.95));
  --team-card-3:
    radial-gradient(circle at top right, rgba(185, 165, 132, 0.12), transparent 13rem),
    linear-gradient(145deg, rgba(239, 234, 226, 0.98), rgba(219, 210, 198, 0.95));
}

/* ─── Game theme (deep navy / cyan) ────────────────────────────────────────── */
.theme-game {
  /* text */
  --ink: #f3f8fd;
  --muted: rgba(243, 248, 253, 0.78);

  /* borders & shadows */
  --line: rgba(132, 206, 252, 0.18);
  --divider: rgba(132, 206, 252, 0.18);
  --surface-shadow: var(--shadow-deep);

  /* background glows */
  --glow-a: rgba(88, 183, 255, 0.18);
  --glow-b: rgba(255, 214, 107, 0.12);

  /* page & section backgrounds */
  --page-bg:
    radial-gradient(circle at top right, rgba(53, 161, 255, 0.2), transparent 30rem),
    radial-gradient(circle at 14% 18%, rgba(255, 214, 95, 0.12), transparent 24rem),
    linear-gradient(180deg, #09233d 0%, #081a2d 58%, #06131f 100%);
  --header-surface: linear-gradient(145deg, rgba(12, 43, 74, 0.92), rgba(9, 31, 54, 0.91));
  --hero-surface:
    radial-gradient(circle at top right, rgba(88, 183, 255, 0.12), transparent 20rem),
    linear-gradient(145deg, rgba(13, 46, 77, 0.93), rgba(8, 29, 49, 0.95));
  --featured-surface: linear-gradient(145deg, rgba(12, 43, 74, 0.92), rgba(9, 31, 54, 0.91));
  --visual-surface: linear-gradient(180deg, rgba(17, 58, 95, 0.9), rgba(10, 33, 55, 0.95));
  --team-surface:
    radial-gradient(circle at top right, rgba(112, 215, 255, 0.08), transparent 18rem),
    linear-gradient(145deg, rgba(12, 43, 74, 0.91), rgba(8, 29, 49, 0.94));
  --panel-surface: linear-gradient(145deg, rgba(14, 48, 80, 0.89), rgba(10, 33, 56, 0.93));

  /* buttons */
  --button-primary-bg: linear-gradient(135deg, #76ddff, #ffd76d);
  --button-primary-ink: #082139;
  --button-secondary-bg: rgba(255, 255, 255, 0.04);
  --button-secondary-border: rgba(148, 216, 255, 0.28);
  --button-secondary-ink: #f3f8fd;

  /* accents */
  --eyebrow: #94d8ff;
  --accent-1: #76ddff;

  /* team cards */
  --team-card-2:
    radial-gradient(circle at top right, rgba(255, 215, 109, 0.12), transparent 13rem),
    linear-gradient(145deg, rgba(18, 54, 86, 0.92), rgba(11, 33, 54, 0.95));
  --team-card-3:
    radial-gradient(circle at top right, rgba(126, 225, 200, 0.14), transparent 13rem),
    linear-gradient(145deg, rgba(16, 55, 91, 0.92), rgba(10, 34, 57, 0.95));
}