/* ============================================================
   cases-skin.css — recolor the imported (old-palette) case pages
   to the redesign's single indigo accent + Geist typography.

   Loaded LAST (after /assets/main-*.css + /assets/cases-*.css) on
   the 32 case pages. The imported bundles are Tailwind v4: every
   color utility resolves a `--color-*` custom property
   (e.g. .text-cyan-400{color:var(--color-cyan-400)}, and the
   /opacity variants use color-mix(... var(--color-cyan-glow) ...)).
   So redefining those tokens here recolors ALL utilities at once —
   text-, bg-, border-, ring-, from-/via-/to-, and their /NN opacity
   variants — without enumerating individual classes.

   Literal hex/rgb colors inside each page's inline <style> blocks
   are handled separately (per-page hex replace). .heading-accent is
   defined with literal colors inside the shared bundle, so it is
   overridden explicitly below.

   Single accent only (indigo). Greens/cyans/purples/teals all map
   onto the same indigo ramp — no secondary accents (project rule).
   ============================================================ */

:root {
  /* indigo ramp anchored to the redesign palette:
     soft #8c98ff · accent #5b6cff · deep #2a3aff */

  /* cyan family */
  --color-cyan-100: #c7ccff;
  --color-cyan-200: #aab3ff;
  --color-cyan-300: #8c98ff;
  --color-cyan-400: #5b6cff;
  --color-cyan-500: #5b6cff;
  --color-cyan-600: #2a3aff;
  --color-cyan-700: #2a3aff;
  --color-cyan-glow: #5b6cff;

  /* purple family */
  --color-purple-100: #c7ccff;
  --color-purple-200: #aab3ff;
  --color-purple-300: #8c98ff;
  --color-purple-400: #8c98ff;
  --color-purple-500: #5b6cff;
  --color-purple-600: #2a3aff;
  --color-purple-700: #2a3aff;

  /* violet family */
  --color-violet-300: #8c98ff;
  --color-violet-400: #8c98ff;
  --color-violet-500: #5b6cff;
  --color-violet-600: #2a3aff;

  /* fuchsia (defensive) */
  --color-fuchsia-400: #8c98ff;
  --color-fuchsia-500: #5b6cff;

  /* teal family */
  --color-teal-300: #8c98ff;
  --color-teal-400: #5b6cff;
  --color-teal-500: #5b6cff;
  --color-teal-600: #2a3aff;

  /* green / emerald are deliberately NOT remapped: they're semantic "good / after /
     success" colors in the before/after comparisons (paired with the red "bad /
     before"). Keeping the conventional red↔green contrast is more important than
     the single-accent rule here. Decorative cyan/purple/teal/blue still → indigo. */

  /* blue / sky → indigo */
  --color-blue-400: #5b6cff;
  --color-blue-500: #5b6cff;
  --color-blue-600: #2a3aff;
  --color-sky-400: #5b6cff;
  --color-sky-500: #5b6cff;

  /* indigo family — align to the redesign hue (bundle's is ~hue 277) */
  --color-indigo-300: #8c98ff;
  --color-indigo-400: #8c98ff;
  --color-indigo-500: #5b6cff;
  --color-indigo-600: #2a3aff;
  --color-indigo-glow: #5b6cff;

  /* brand "primary" was a purple (#7a3be8) */
  --color-primary: #5b6cff;

  /* Geist everywhere (override Manrope tokens) */
  --font-display: "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, sans-serif;
}

/* Body: override the per-page inline <style> that hard-codes Manrope. Source
   order (this file loads after the inline style) + !important is enough here —
   the bundle's body font rule is not !important. */
body,
.font-display, .font-body {
  font-family: "Geist", system-ui, sans-serif !important;
}

/* Headings: the imported bundle forces "Playfair Display" on h1–h6 with an
   !important rule INSIDE @layer base. For !important declarations a LAYERED rule
   beats an unlayered one regardless of source order/specificity — so an
   unlayered override silently loses (that's why headings stayed on the old serif
   while the body switched). The fix is to live in the same layer: appended after
   the bundle, same specificity, later order → this wins. Geist 600 matches the
   redesign's heading weight (the bundle pinned headings to 400). */
@layer base {
  h1, h2, h3, h4, h5, h6 {
    font-family: "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-style: normal !important;
  }
}

/* heading-accent gradient lives in the shared bundle with literal cyan→
   indigo→purple colors. Remap to a clean indigo gradient; drop the italic
   so it matches the redesign's upright accent. */
.heading-accent {
  font-style: normal !important;
  background-image: linear-gradient(135deg, #8c98ff, #5b6cff, #2a3aff) !important;
  text-shadow: 0 0 30px rgba(91, 108, 255, 0.30), 0 0 60px rgba(91, 108, 255, 0.15) !important;
}