/* ToolScorecard Design System — Review Premium v3 */
:root{
  --grey-50:#F5F1EA; --grey-100:#EBE4D7; --grey-200:#D9D0C0; --grey-300:#C4B9A5;
  --grey-400:#9E9280; --grey-500:#7A7268; --grey-600:#5C554C; --grey-700:#4A4540;
  --grey-800:#2D2925; --grey-900:#181613;
  --blue-50:#F0F4FA; --blue-100:#DBE6F5; --blue-200:#B8D0ED; --blue-400:#1A5096; --blue-600:#143D72;
  --green-50:#F0F8F4; --green-100:#D9F0E4; --green-400:#008236; --green-600:#006628;
  --amber-50:#FFF8F0; --amber-100:#FFE8D0; --amber-400:#C65D00; --amber-600:#9A4700;
  --purple-50:#F8F5FB; --purple-100:#EDE3F5; --purple-400:#5C3D6E;
  --red-50:#FDF5F5; --red-100:#FBE0E0; --red-400:#B71C1C;
  --paper:var(--grey-50); --paper-elevated:#FFFEFC; --paper-dark:var(--grey-100);
  --paper-warm:#F9F6F0;
  --ink:var(--grey-900); --ink-soft:var(--grey-700); --ink-muted:var(--grey-500);
  --line:rgba(0,0,0,.06); --line-strong:rgba(0,0,0,.10);
  --radius:8px; --radius-lg:12px;
  --blue:var(--blue-400); --green:var(--green-400); --amber:var(--amber-400);
  --red:var(--red-400); --purple:var(--purple-400);
}

/* Dynamic ambient light field — slowly shifting color washes */
/* Perf: reduced to 3 gradients, will-change hint, lower opacity */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 800px 500px at 20% 25%, var(--blue-100) 0%, transparent 60%),
    radial-gradient(ellipse 700px 450px at 80% 70%, var(--green-100) 0%, transparent 55%),
    radial-gradient(ellipse 600px 400px at 55% 45%, var(--amber-50) 0%, transparent 60%);
  background-size:200% 200%;
  animation:energyField 28s ease-in-out infinite;
  opacity:.45;
  will-change:background-position;
}
@keyframes energyField{
  0%{background-position:0% 50%}
  33%{background-position:100% 25%}
  66%{background-position:80% 75%}
  100%{background-position:0% 50%}
}

/* Card depth — content above energy field */
.card,main,nav,section,footer{position:relative;z-index:3}

/* Card base enhancements — warm shadow, distinct elevation */
.card{box-shadow:0 1px 2px rgba(0,0,0,.03),0 4px 12px rgba(0,0,0,.04)}
.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.08);border-color:rgba(0,0,0,.10)}

/* Review cards — colored accent stripe */
.card-accent-blue{border-left:3px solid var(--blue)}
.card-accent-green{border-left:3px solid var(--green)}
.card-accent-amber{border-left:3px solid var(--amber)}
.card-accent-red{border-left:3px solid var(--red)}
.card-accent-purple{border-left:3px solid var(--purple)}

/* Section rhythm — alternating backgrounds */
.section-alt{background:var(--paper-warm);margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
.section-dark{background:var(--paper-dark);margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}

/* Section divider — subtle hairline with accent dot */
.section-divider{width:48px;height:3px;background:var(--blue);border-radius:2px;margin:0 0 24px 0;opacity:.6}

/* Badge color variants */
.badge-blue{background:var(--blue-50);color:var(--blue);border:1px solid var(--blue-100)}
.badge-green{background:var(--green-50);color:var(--green);border:1px solid var(--green-100)}
.badge-amber{background:var(--amber-50);color:var(--amber);border:1px solid var(--amber-100)}
.badge-purple{background:var(--purple-50);color:var(--purple);border:1px solid var(--purple-100)}
.badge-red{background:var(--red-50);color:var(--red);border:1px solid var(--red-100)}

/* Winner highlight card */
.card-winner{border:2px solid var(--amber);box-shadow:0 2px 4px rgba(198,93,0,.06),0 8px 24px rgba(198,93,0,.12)}
.card-winner:hover{border-color:var(--amber-600);box-shadow:0 4px 8px rgba(198,93,0,.08),0 12px 32px rgba(198,93,0,.18)}

/* Review score — large display number */
.score-hero{font-family:'JetBrains Mono',monospace;font-size:3rem;font-weight:700;letter-spacing:-0.04em;line-height:1}
.score-label{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted)}