@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --void: #0C2033;
  --abyss: #091929;
  --deep: #152C40;
  --surface: #1B3850;
  --raised: #24485E;
  --border-dim: rgba(50,120,170,0.28);
  --border: #2E6080;
  --tidal: #00D4AC;
  --tidal-glow: rgba(0,212,172,0.10);
  --amber: #F5A623;
  --amber-glow: rgba(245,166,35,0.10);
  --storm: #E63946;
  --storm-glow: rgba(230,57,70,0.08);
  --mist: #7AB8D4;
  --fog: #5A9AB8;
  --foam: #C8E4F2;
  --white: #EBF4FA;
  --fd: 'Space Grotesk', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --fm: 'JetBrains Mono', monospace;
  --pad: 24px;
  --radius: 0;
  --radius-sm: 0;
  --radius-md: 0;
}

[data-theme="light"] {
  --void: #f2f6f9;
  --abyss: #f2f6f9;
  --deep: #f8fbfd;
  --surface: #ffffff;
  --raised: #f4f9fc;
  --border-dim: rgba(0,0,0,0.06);
  --border: #dde5ea;
  --tidal: #00A882;
  --tidal-glow: rgba(0,168,130,0.08);
  --amber: #B07800;
  --amber-glow: rgba(176,120,0,0.08);
  --storm: #C0303A;
  --storm-glow: rgba(192,48,58,0.08);
  --mist: #5A8AA0;
  --fog: #8AAFC0;
  --foam: #0C2033;
  --white: #0C2033;
}

/* Sharp-cornered editorial default — all component classes inherit 0 radius */
button, input, select, textarea,
[class$="-card"], [class$="-pill"], [class$="-badge"],
[class$="-btn"], [class$="-chip"], [class$="-tag"],
[class^="c-"], [class^="h-"], [class^="fc-"], [class^="mp-"],
[class^="hero-"], [class^="cam-"], [class^="drawer-"] {
  border-radius: 0 !important;
}

/* ── Star ratings ─────────────────────────────────────────────
   0-5 stars with half-star granularity. Fill color matches score
   band. Two densities: default (17px) for hero/summary contexts,
   small (15px) for dense table rows.
   ─────────────────────────────────────────────────────────── */

.sc-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  flex-shrink: 0;
}

.sc-stars svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  display: block;
}

.sc-stars.sc-stars-sm svg {
  width: 15px;
  height: 15px;
}

/* Base star path fill states */
.sc-stars .sc-star-full { opacity: 1; }
.sc-stars .sc-star-half { opacity: 0.45; }
.sc-stars .sc-star-empty {
  fill: none;
  stroke: #2E6080;
  stroke-width: 1.5;
  opacity: 1;
}

/* Stars always fill tidal — the band color is already carried by
   the score number/pill nearby. Stars are the "quality glance"
   element and stay one consistent color for legibility. */
.sc-stars .sc-star-full,
.sc-stars .sc-star-half { fill: var(--tidal, #00D4AC); }