/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · light theme · the ten case studies (shared)
   The case studies are already a light page under a dark hero: the dark theme is "noir hero + light body + black close". This layer finishes the job:
     tokens ..... the body's lavender/purple greys become the neutral greys of the rest of the site
     hero ....... ink on white; each study's accent (--ca-rgb) is darkened with color-mix so it clears AA on white, whatever colour that study uses
     the strip .. the mid-page dark "ask" and the dark next-step card are re-set on light
   The last block (legibility) is GENERATED from the contrast audit: the original body has many very faint labels (navy at 25-45% alpha); in light mode they are lifted.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* tokens: the body's lavender greys become the site's neutral greys, in both themes (the article is light in both) */
html[data-theme] {
  --muted: #5b5b63;
  --surf: #f3f3f5;
  --surf-b: #f8f8f9;
  --brand: #47029A;
  --ca-ink: color-mix(in srgb, rgb(var(--ca-rgb)) 55%, #0e0e0e);   /* the study's accent, dark enough to read as text on white */
}
html[data-theme="light"] body { background: #fff; }

/* ───── hero ───── */
html[data-theme="light"] .cs-hero.cs-hero { border-bottom: 1px solid var(--lt-line); --cs-rule: rgba(14, 14, 14, .065); --cs-grain: .05;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--ca-rgb), .55) 38%, rgba(var(--ca-rgb), .14) 72%, transparent 100%) 0 0 / 100% 1px no-repeat,
              radial-gradient(ellipse 62% 76% at 80% -14%, rgba(var(--ca-rgb), .10) 0%, transparent 62%),
              radial-gradient(ellipse 74% 62% at 6% 118%, rgba(var(--ca-rgb), .05) 0%, transparent 58%), #fff; }
html[data-theme="light"] .cs-hero.cs-hero::after { mix-blend-mode: multiply; }   /* the grain darkens paper rather than lifting it */
html[data-theme="light"] .cs-hero .cs-back-link { color: var(--lt-meta); }
html[data-theme="light"] .cs-hero .cs-back-link:hover { color: var(--lt-ink); }
html[data-theme="light"] .cs-hero .cs-hero-accent-rule { background: linear-gradient(180deg, var(--ca-ink) 0%, rgba(var(--ca-rgb), .3) 100%); }
html[data-theme="light"] .cs-hero .cs-hero-vertical { color: var(--lt-ink); }
html[data-theme="light"] .cs-hero .cs-hero-cat { color: var(--lt-meta); }
html[data-theme="light"] .cs-hero .cs-hero-headline { color: var(--lt-ink); }
html[data-theme="light"] .cs-hero .cs-hero-strategic-sub { color: var(--lt-body); }
html[data-theme="light"] .cs-hero .cs-hero-strategic-sub span { color: var(--lt-meta); }
html[data-theme="light"] .cs-hero .cs-hero-stat.single,
html[data-theme="light"] .cs-hero--conversion .cs-hero-stat.single { color: var(--ca-ink); -webkit-text-fill-color: var(--ca-ink); text-shadow: none; filter: none; }   /* text-fill-color and the glow filter would otherwise win */
html[data-theme="light"] .cs-hero .cs-hero-stat .before { color: #8d8d8d; }
html[data-theme="light"] .cs-hero .cs-hero-stat .arrow { color: rgba(var(--ca-rgb), .9); }
html[data-theme="light"] .cs-hero .cs-hero-stat .after { color: var(--ca-ink); }
html[data-theme="light"] .cs-hero .cs-hero-roas-lbl { color: var(--lt-meta); }
html[data-theme="light"] .cs-hero .cs-hero-byline { border-top-color: var(--lt-line); }
html[data-theme="light"] .cs-hero .cs-hero-byline .cs-byline-by { color: var(--lt-meta); }
html[data-theme="light"] .cs-hero .cs-hero-byline .cs-byline-author { color: var(--lt-ink); }
html[data-theme="light"] .cs-hero .cs-hero-byline .cs-byline-role, html[data-theme="light"] .cs-hero .cs-hero-byline .cs-byline-date { color: var(--lt-meta); }
html[data-theme="light"] .cs-hero .cs-hero-byline .cs-byline-sep { color: #b8b8be; }
html[data-theme="light"] .cs-hero .cs-hero-proof {
  background: #f8f8f9; border: 1px solid var(--lt-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 24px 50px -28px rgba(14, 14, 14, .22);
}
html[data-theme="light"] .cs-hero .cs-hero-proof-val { color: var(--ca-ink); }
html[data-theme="light"] .cs-hero .cs-hero-proof-lbl { color: var(--lt-meta); }
html[data-theme="light"] .cs-hero .cs-hero-proof-divider { background: var(--lt-line); }

/* ───── the mid-page ask ─────
   In the dark theme it is a black strip. On a light page it would be a second dark block competing with the closing band (the page's one dark island), so it is a soft
   gray strip here with the deep-ember commit button. */
html[data-theme="light"] .cs-proof-interrupt { background: #f3f3f5; border-top: 1px solid var(--lt-line); border-bottom: 1px solid var(--lt-line); }
html[data-theme="light"] .cs-proof-interrupt-eyebrow { color: var(--lt-meta) !important; }
html[data-theme="light"] .cs-proof-interrupt-text { color: var(--lt-ink); }
html[data-theme="light"] .cs-proof-interrupt-btn { background: var(--lt-cta); color: var(--lt-cta-fg); box-shadow: var(--lt-cta-sh); }
html[data-theme="light"] .cs-proof-interrupt-btn:hover { background: var(--lt-cta-hover); box-shadow: var(--lt-cta-sh-h); }

/* the "View full size" chip sits on mostly-white dashboard screenshots: its 62% dark chip leaves 72%-white text at 3.8:1, so on light the text goes fully white (5.7:1) */
html[data-theme] .lb-hint { color: #fff; }   /* both themes: the chip sits on the same light screenshots */

/* a dimmed "archived" table row (outdoor gear): the dark theme leaves it at .55 opacity; on white that is 4.15:1, so it comes up to .7 (still clearly secondary) */
html[data-theme] tr[style*="opacity:.55"] { opacity: .7 !important; }   /* the dimming is an inline style on the row, so only !important can reach it */

/* the audit tables' header rows (outdoor gear, mobile accessories): navy at 38% on the row tint measured 2.4:1 in both themes; #606067 is 5.3:1 on the tinted row */
html[data-theme] .cs-audit-rows th { color: #606067; }