/* theme-light.css — light-brand override for the Six engine.
   Loads ONLY when config.brand.theme === "light" (gated in base.ejs), so the
   default dark quizzes (Six, Survive, Ready) are completely untouched.

   Palette-AGNOSTIC: every accent derives from the brand vars
   (--color-primary, --color-accent) via color-mix, so a client's palette
   flows straight from config/site.json. Nothing here hardcodes a hue.
   styles.css is ~95% var()-driven already; this file fixes the handful of
   dark-ASSUMING spots config can't reach (gradient titles that start at #fff,
   selected-card text forced white, the inline dark email-gate fields, the
   light-on-dark secondary greys) and rebinds the hardcoded cyan/purple tints
   to the brand. Scoped to body[data-theme="light"] for isolation + specificity. */

/* Secondary text + hairlines: dark-theme values are too light for white. */
body[data-theme="light"] {
  --color-soft: #6f6a78;
  --color-soft-dim: #9a94a6;
  --color-line-soft: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

body[data-theme="light"] .bg-glow {
  background:
    radial-gradient(ellipse 900px 600px at 50% -5%, color-mix(in srgb, var(--color-primary) 9%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 700px 500px at 90% 100%, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 0% 80%, color-mix(in srgb, var(--color-primary) 5%, transparent) 0%, transparent 70%);
}

body[data-theme="light"] ::selection { background: color-mix(in srgb, var(--color-primary) 28%, transparent); color: #ffffff; }

/* Gradient titles start at #ffffff in styles.css -> invisible on white.
   Repoint to a dark -> primary -> accent gradient so they read on light. */
body[data-theme="light"] .hero-headline {
  background: linear-gradient(115deg, var(--color-text) 0%, var(--color-text) 28%, var(--color-primary) 78%, var(--color-accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body[data-theme="light"] .intro h1,
body[data-theme="light"] .email-gate h1,
body[data-theme="light"] .error h1,
body[data-theme="light"] .login-page h1,
body[data-theme="light"] .zone-header h3 {
  background: linear-gradient(115deg, var(--color-text) 0%, var(--color-primary) 82%, var(--color-accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Cards: tints -> brand. Selected state forced white text on a near-white card
   -> readable dark text on a soft brand tint. */
body[data-theme="light"] .card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 0%, color-mix(in srgb, var(--color-accent) 3%, transparent) 100%),
    var(--color-elevated);
  border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
}
body[data-theme="light"] .card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, color-mix(in srgb, var(--color-accent) 6%, transparent) 100%),
    var(--color-elevated);
}
body[data-theme="light"] .card.selected,
body[data-theme="light"] .card:has(input:checked) {
  border-color: var(--color-primary);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, color-mix(in srgb, var(--color-accent) 10%, transparent) 100%),
    var(--color-elevated);
  box-shadow: 0 0 0 1px var(--color-primary), 0 0 24px color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-text);
}
body[data-theme="light"] .card:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 32%, transparent);
}
body[data-theme="light"] .card-num { border-color: color-mix(in srgb, var(--color-primary) 25%, transparent); }
body[data-theme="light"] .card.selected .card-num,
body[data-theme="light"] .card:has(input:checked) .card-num {
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* Email-gate fields: the inline <style> in quiz-email.ejs paints them dark navy.
   Higher-specificity light overrides. */
body[data-theme="light"] .email-form input[type="text"],
body[data-theme="light"] .email-form input[type="email"],
body[data-theme="light"] .email-form input[type="tel"],
body[data-theme="light"] .email-form select {
  background: #ffffff;
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}
body[data-theme="light"] .email-form input::placeholder { color: var(--color-muted-soft); }
body[data-theme="light"] .email-form select option { background: #ffffff; color: var(--color-text); }
body[data-theme="light"] .email-form input:focus,
body[data-theme="light"] .email-form select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
body[data-theme="light"] .email-form input:-webkit-autofill,
body[data-theme="light"] .email-form input:-webkit-autofill:hover,
body[data-theme="light"] .email-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: var(--color-text);
}
body[data-theme="light"] .email-form .field-label { color: var(--color-muted); }

/* Result + accent surfaces. */
body[data-theme="light"] .zone { border-color: var(--color-line); }
body[data-theme="light"] .zone::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 70%);
}
body[data-theme="light"] .zone-tag--aligned {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
/* SURPLUS tag is a pale yellow (#faf089) in styles.css — unreadable on white.
   Darken to a legible amber while keeping the amber "caution" semantic. */
body[data-theme="light"] .zone-tag--surplus {
  color: #8a6d00;
  background: rgba(202, 160, 30, 0.10);
  border-color: rgba(202, 160, 30, 0.45);
}
/* GAP tag pink (#fbb6ce) is also light on white — nudge to a legible rose. */
body[data-theme="light"] .zone-tag--gap {
  color: #b03060;
  background: rgba(176, 48, 96, 0.08);
  border-color: rgba(176, 48, 96, 0.40);
}
body[data-theme="light"] .hot-zone {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, color-mix(in srgb, var(--color-accent) 8%, transparent) 100%);
  border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
body[data-theme="light"] .coaching-cta { border-color: color-mix(in srgb, var(--color-primary) 22%, transparent); }
body[data-theme="light"] .coaching-cta::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 70%);
}
body[data-theme="light"] .coaching-cta::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 70%);
}
body[data-theme="light"] .pdf-block { border-color: color-mix(in srgb, var(--color-primary) 20%, transparent); }
body[data-theme="light"] .pdf-block::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 70%);
}
body[data-theme="light"] .share-block { border-color: color-mix(in srgb, var(--color-primary) 14%, transparent); }
body[data-theme="light"] .share-block::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 10%, transparent) 0%, transparent 70%);
}
body[data-theme="light"] .btn-share { border-color: color-mix(in srgb, var(--color-primary) 25%, transparent); }
body[data-theme="light"] .btn-share:hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
body[data-theme="light"] .progress-fill { box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 50%, transparent); }

/* Primary button keeps the brand gradient (primary->accent via vars); warm its
   shadow to the brand instead of a cyan halo. */
body[data-theme="light"] .btn-primary,
body[data-theme="light"] .btn-pdf {
  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-primary) 28%, transparent), 0 1px 0 rgba(255,255,255,0.20) inset;
}