/* Light colour scheme for the account portal and admin workspace.

   Dark is the design and the default. Nothing here applies unless the system
   reports that it prefers light; browsers that report no preference stay dark.

   Two layers are swapped:
   1. The workspace palette that styles.css declares on .app-page/.auth-page,
      which every component and Tailwind utility already reads.
   2. --lt-* values. Hard-coded colours in the stylesheets are written as
      var(--lt-NAME, <dark literal>). No --lt-* property exists in the dark
      scheme, so those resolve to their original literal; this block gives
      each one its light counterpart.

   Contrast mirrors the dark scheme: body text ~17:1, secondary ~6:1, faint
   ~4.5:1, hairlines ~1.3:1, status text >= 4.5:1 on the card surface. */

@media (prefers-color-scheme: light) {
  .app-page,
  .auth-page {
    color-scheme: light;

    --bg: #f4f4f1;
    --panel: #ffffff;
    --field: #f7f7f4;
    --line: #dcdcd6;
    --line-strong: #c6c7c1;
    --text: #101215;
    --text-2: #101215;
    --muted: #565d66;
    --muted-2: #626972;
    --faint: #7a8089;

    --color-bg: #f4f4f1;
    --color-fg: #101215;
    --color-card: #ffffff;
    --color-mutedfg: #565d66;
    --color-faint: #626972;
    --color-placeholder: #7a8089;
    --color-primary: #2858d6;
    --color-primaryfg: #f7f7f4;
    --color-accent: #efefeb;
    --color-border: #dcdcd6;
    --color-borderstrong: #c6c7c1;
    --color-field: #f7f7f4;
    --color-warm: #101215;

    --blue: #2858d6;
    --red: #c62f37;
    --green: #0f7349;
    --purple: #6d4ad6;

    /* White-alpha hover and raised tints become ink-alpha. */
    --lt-ink-rgb: 16, 18, 21;

    --lt-blue: #2858d6;
    --lt-blue-text: #2652c4;
    --lt-slate-text: #46505e;
    --lt-red: #c62f37;
    --lt-red-text: #b3262e;
    --lt-green: #0f7349;
    --lt-green-text: #0f6a44;
    --lt-purple: #6d4ad6;
    --lt-purple-text: #5f3fc0;
    --lt-amber: #8a5009;
    --lt-amber-text: #7d4808;
    --lt-gray-text: #5f646b;

    --lt-bg: #f4f4f1;
    --lt-line: #d2d3cd;
    --lt-line-strong: #b9bab4;
    --lt-raised: #ffffff;
    --lt-sunken: #f1f1ee;
    --lt-field: #ffffff;
    --lt-code: #f1f1ee;
    --lt-glass: rgba(255, 255, 255, 0.97);
    --lt-backdrop: rgba(16, 18, 21, 0.34);
    --lt-on-danger: #ffffff;

    background: #f4f4f1;
  }

  /* Native select menus follow the scheme instead of the forced dark one. */
  .pw-card select,
  .pw-newrow select {
    color-scheme: light;
  }

  /* Product accents are admin-chosen and tuned for the dark ground. Where an
     accent colours text or an icon, darken it so pale accents stay legible;
     tinted fills and borders keep the accent as chosen. */
  .app-page .dash-product__meta {
    color: color-mix(in oklab, var(--dash-accent) 58%, #000);
  }
  .app-page .am-product__game {
    color: color-mix(in oklab, var(--pw-accent) 58%, #000);
  }
  .app-page :is(.pw-productmark, .pc-product-link__mark, .pc-section__number) {
    color: color-mix(in oklab, var(--pw-accent, var(--lt-blue)) 62%, #000);
  }
  .app-page .admin-access-product__mark {
    color: color-mix(in oklab, var(--access-accent) 62%, #000);
  }

  /* Tailwind arbitrary-value utilities compiled with fixed colours. */
  .app-page .text-\[\#ff6b70\] { color: var(--lt-red); }
  .app-page .text-\[\#41c98a\] { color: var(--lt-green); }
  .app-page .text-\[\#a98bff\] { color: var(--lt-purple); }
  .app-page .text-\[\#e0a050\] { color: var(--lt-amber); }
  .app-page .bg-\[\#41c98a\] { background-color: var(--lt-green); }
}