:root {
  /* Base palette (warm cream + coral + gentle teal) */
  --bg: #fff8f3; /* page background */
  --bg-2: #fff3ec; /* subtle sections/background alt */
  --text: #2b2b2b; /* primary text (dark) */
  --muted: #6b7280; /* body-muted text (neutral gray) */

  /* Extras your layout uses */
  --muted-2: #7a828f; /* captions under images */
  --muted-dim: #7f8691; /* footer disclaimer */
  --panel: #ffffff; /* panels/cards base (not strictly used but kept) */

  /* CTAs (Netflix-style mapping -> coral variants) */
  --accent: #ff6f61; /* primary CTA coral */
  --accent-2: #e85b52; /* hover coral */

  /* Support accent (teal) available for future components */
  /* --accent-alt: #3aa588; */

  --ring: #ff6f6126; /* coral-tinted focus/outline */
  --radius: 18px;
  --radius-img: 14px;

  /* Card visuals on a light theme */
  --background: #ffffff; /* card fill */
  --card-border: rgba(0, 0, 0, 0.06); /* soft border on light */
  --shadow: 0 10px 30px rgba(255, 111, 97, 0.15), 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Optional: adjust tag for light theme contrast (keeps your existing style) */
.tag {
  color: #2b2b2b;
  background: #fff;
}