/* ============================================================
   Light version (brand proposals P7 + P10, staged, not locked).
   The homepage tells the "why" on paper; the AIfred product page
   stays dark navy. Same system, the proportions flip.

   Scope: <body class="theme-light">. Everything else (type scale,
   spacing, sharp corners, gold CTA, ember only for "AI") is the
   unchanged dark system from tokens.css / site.css.

   .is-navy re-declares the dark values locally. It marks a "navy
   island" (P10: allowed once as the single focal surface, here the
   AIfred band), the photo hero and the footer.
   ============================================================ */

.theme-light {
  /* P7: paper is the one background; white cards on it */
  --bg-page: #f9fafb;
  --bg-alt: #f9fafb;
  --surface-raised: #ffffff;
  --surface-card: #ffffff;
  --surface-card-hover: #fcfcfd;

  /* Text: deep navy on paper; P7 --ink-muted for the meta level (7.2:1) */
  --text-strong: #05101d;
  --text-body: #05101d;
  --text-muted: #42566c;

  /* P7 hairline (deep 12%) and card border (deep 16%); strong structure a step up */
  --line-faint: #e6e8ea;
  --line: #dcdee0;
  --line-strong: #c3c8cd;
  --border-card: #d2d5d7;
  --border-card-strong: #c3c8cd;
  --divider: #dcdee0;

  /* P7: gold stays a surface / rule; as text it needs the ink value (4.8:1) */
  --gold-ink: #8a6a1e;
  --gold-tint: #fcf8f2;

  /* P10: teal carries the guest's state */
  --teal-ink: #1c7c78;
  --teal-tint: #e5f7f6;
  --teal-border: #9fe2db;

  --signal-track: rgba(5, 16, 29, 0.08);
  --shadow-lg: 0 18px 40px -18px rgba(5, 16, 29, 0.28), 0 0 0 1px #d2d5d7;
  --shadow-hero: 0 24px 60px -24px rgba(5, 16, 29, 0.35), 0 0 0 1px #d2d5d7;
  color-scheme: light;
}

/* ---- navy island: the dark values, locally ---- */
.is-navy {
  --bg-page: #05101d;
  --surface-raised: #0a1c34;
  --surface-card: #0d2240;
  --surface-card-hover: #15355d;
  --text-strong: #f9fafb;
  --text-body: #f9fafb;
  --text-muted: #7892aa;
  --line-faint: rgba(249, 250, 251, 0.12);
  --line: rgba(249, 250, 251, 0.20);
  --line-strong: rgba(249, 250, 251, 0.38);
  --border-card: rgba(249, 250, 251, 0.20);
  --divider: rgba(249, 250, 251, 0.20);
  --signal-track: rgba(249, 250, 251, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  color: var(--text-body);
  color-scheme: dark;
}
.theme-light .mk-footer { background: #030a13; }

/* ---- header on paper ---- */
.theme-light .mk-header { background: color-mix(in srgb, #f9fafb 88%, transparent); border-bottom-color: var(--line); }
.theme-light .mk-nav a { color: var(--text-muted); }
.theme-light .mk-nav a:hover, .theme-light .mk-nav a[aria-current="page"] { color: var(--text-strong); }
.theme-light .mk-header.is-open .mk-nav { background: #f9fafb; }
.theme-light .mk-nav-toggle[aria-expanded="true"] { background: #ffffff; }
.theme-light .mk-header.is-open .mk-nav__cta { color: var(--gold-ink); }

/* ---- controls on paper ---- */
.theme-light .sl-btn--secondary { color: var(--text-strong); border-color: var(--line-strong); }
.theme-light .sl-btn--secondary:hover { border-color: var(--text-strong); }
.theme-light .is-navy .sl-btn--secondary { color: #f9fafb; border-color: rgba(249, 250, 251, 0.38); }
.theme-light .is-navy .sl-btn--secondary:hover { border-color: #f9fafb; }
.theme-light .mk-textlink { color: var(--gold-ink); }
.theme-light .mk-textlink:hover { color: #6f5417; }
.theme-light .is-navy .mk-textlink { color: var(--gold-500); }
.theme-light .is-navy .mk-textlink:hover { color: var(--gold-400); }
.theme-light .mk-footer__col a:hover { color: var(--gold-500); }
.theme-light ::selection { background: var(--gold-tint-40); color: #05101d; }

/* ---- form fields on paper ---- */
.theme-light .mk-field input, .theme-light .mk-field textarea { background: #ffffff; border-color: var(--border-card); }
.theme-light .mk-field input::placeholder, .theme-light .mk-field textarea::placeholder { color: #7a8898; }
.theme-light .mk-form__status { color: var(--teal-ink); }
.theme-light .mk-form__note a { color: var(--gold-ink); }

/* ---- imagery on paper: keep the photo's own light, grade only lightly ---- */
.theme-light .mk-media__frame { border-color: var(--border-card); background: #e9ecef; }
.theme-light .mk-media__img { filter: saturate(0.9) contrast(1.02); }
.theme-light .mk-media__grade {
  background: linear-gradient(180deg, rgba(5,16,29,0) 55%, rgba(5,16,29,0.18) 100%); }
.theme-light .mk-media:hover .mk-media__img { filter: saturate(1) contrast(1.02); }
.theme-light .is-navy .mk-media__img { filter: saturate(0.72) brightness(0.86) contrast(1.04); }

/* AIfred two-colour name: ember stays exact on paper (P7), fred follows the text colour */
.theme-light .aifred .ai { color: var(--ember-500); }

/* team tiles on paper */
.theme-light .mk-member__photo, .theme-light .mk-member__face { border-color: var(--border-card); }
.theme-light .mk-member--link:hover .mk-member__name { color: var(--gold-ink); }

/* photo bands on paper keep the dark grade so overlaid copy stays legible */
.theme-light .is-navy .mk-media__grade {
  background:
    linear-gradient(180deg, rgba(5,16,29,0.10) 0%, rgba(5,16,29,0.30) 55%, rgba(5,16,29,0.78) 100%),
    linear-gradient(0deg, rgba(13,34,64,0.30), rgba(13,34,64,0.30)); }
.theme-light .is-navy.mk-band:hover .mk-media__grade { opacity: 0.55; }

/* ---- P7: lockup on paper. Geometry unchanged; deep foreground at 0.92, divider 0.22 ---- */
.theme-light .mk-header .sl-logo rect { stroke-opacity: 0.92; }
.theme-light .mk-header .sl-logo circle[fill="currentColor"] { fill-opacity: 0.92; }
.theme-light .mk-header .mk-brand__div { background: rgba(5, 16, 29, 0.22); }

/* ---- P10: gold = what AIfred delivers. The recommendation on the guest's screen is a
   signal card: gold tint instead of plain white, a gold rule on top ---- */
.theme-light .st-screen { background: var(--gold-tint); border-color: #eadcbc; border-top: 2px solid var(--gold-500); }
.theme-light .st-screen__bar span:first-child { color: var(--gold-ink); }

/* ---- P10: teal = the guest's state. "Needs" rows carry a drawn tick
   (teal-ink strokes on a teal-tint circle; Instrument Sans has no check glyph) ---- */
.theme-light .st-fit dd.is-need { display: flex; gap: var(--sp-2); align-items: flex-start; }
.theme-light .st-fit dd.is-need::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  background: var(--teal-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%231c7c78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: inset 0 0 0 1px var(--teal-border); }