/* Phase 1 identity: equal blue/green accents, static decoration only.
   Kept separate from layout rules so the existing responsive structure stays intact. */
:root {
  --playstation: #0070d1; --xbox: #107c10;
  --blue: #0070d1; --green: #107c10;
  --brand-gradient: linear-gradient(105deg, #0070d1 5%, #2f8f79 50%, #107c10 95%);
  --brand-surface: linear-gradient(110deg, #0c263b, #15231a);
  --brand-edge: linear-gradient(110deg, #0070d180, #107c1070);
}

/* One small, cached SVG tile; no particles, timers, filters or animation. */
body { background: url('stars.svg') repeat, var(--bg); }
header { background: #050709b3; }
.brand > span:not(.brand-mark) { color: var(--green); }
.brand > span > span { color: #51baff; }
.brand-mark { color: var(--green); border-color: #294454; }
.brand-mark span { color: #51baff !important; }
footer .brand { color: var(--green); }
footer .brand span { color: #51baff; }

h1 > span, .orbit span, .steps article > span {
  color: #77cfd1;
  background: var(--brand-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.orbit span { padding-right: .1em; }
.eyebrow, dialog .eyebrow { color: #83c9ed; }
.line { background: var(--brand-gradient); }
.service-line b:nth-of-type(odd), h2 > span:not(.sr-only), summary:after { color: #51baff; }
nav a:hover { color: #83c9ed; }
.button:hover { border-color: #70c3da; }

/* Main actions combine both colors. Repeated catalog actions stay understated. */
.primary, .filters button[aria-pressed=true] {
  background: var(--brand-gradient);
  color: #061019;
  border-color: transparent;
}
.primary:hover { background: linear-gradient(105deg, #75c9ff, #a6f34c); }
.card-actions .primary, dialog .primary {
  color: #edf9ff;
  border: 1px solid transparent;
  background: var(--brand-surface) padding-box, var(--brand-edge) border-box;
}
.card-actions .primary:hover, dialog .primary:hover {
  background: linear-gradient(110deg, #12334c, #20351e) padding-box, var(--brand-gradient) border-box;
}
.skip { background: var(--brand-gradient); }

.hero-panel {
  border-color: transparent;
  background:
    radial-gradient(ellipse at 12% 32%, #0070cc20, transparent 66%) padding-box,
    radial-gradient(ellipse at 88% 68%, #8bf21a13, transparent 66%) padding-box,
    linear-gradient(#0b1012, #0b1012) padding-box,
    var(--brand-edge) border-box;
  box-shadow: -18px 0 60px -38px #0070cc50, 18px 0 60px -38px #8bf21a38;
}
.panel-top { color: #a7b8c1; }
.orbit {
  border-color: #0070cc70;
  border-right-color: #8bf21a65;
  box-shadow: -10px 0 28px -20px #00a8ff70, 10px 0 28px -20px #8bf21a60;
}
.orbit:before { border-color: #00a8ff50; border-bottom-color: #8bf21a50; }
.platform-tag { color: #51baff; }
.platform-tag.xbox { color: var(--green); }

.placeholder, .gallery-item:nth-child(even) .placeholder {
  background: linear-gradient(120deg, #0d2030, #0b1012 48%, #172510);
  color: #a3b0b8;
}
.placeholder .monogram, .gallery-item .placeholder .monogram,
.gallery-item:nth-child(even) .monogram {
  color: #90b4bc;
  background: linear-gradient(110deg, #79b5df, #a0c482);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.category-label { border-color: #34444b; color: #d0d9df; }
.gallery-section { background: #090e10c9; }
.contact-section {
  border-color: transparent;
  background: linear-gradient(110deg, #0b1b29, #0b1012 50%, #15200f) padding-box,
    var(--brand-edge) border-box;
}
dialog { border-color: #344e5c; }

/* Platform identity is based only on configured compatibility, never inferred. */
[data-platform='playstation'] .placeholder {
  background: linear-gradient(125deg, #0c2841, #0b1012);
}
[data-platform='playstation'] .monogram {
  background: none;
  -webkit-text-fill-color: #79b5df;
  color: #79b5df;
}
[data-platform='playstation'] .card-platform,
[data-platform='playstation'] .platform-detail { color: #75bfff; }
[data-platform='playstation'] .primary {
  background: var(--playstation);
  border-color: #258ce1;
  color: white;
}
[data-platform='playstation'] .primary:hover { background: #0863ad; }
[data-platform='xbox'] .placeholder { background: linear-gradient(125deg, #1b3010, #0b1012); }
[data-platform='xbox'] .card-platform,
[data-platform='xbox'] .platform-detail { color: var(--green); }
[data-platform='xbox'] .primary { background: var(--green); border-color: var(--green); color: #071005; }

@media (forced-colors: active) {
  h1 > span, .orbit span, .steps article > span, .placeholder .monogram,
  .gallery-item .placeholder .monogram, [data-platform] .monogram {
    background: none;
    -webkit-text-fill-color: CanvasText;
  }
}