/* ── FEATURE-43 — the light theme: warm paper, retro (specs/010-light-theme) ─────────────────────────────
   The feel of an Evercade cartridge manual: cream paper, near-white cards, brown-black ink, a warm red.
   Shared by every page (the app and the public pages). Each page keeps its dark values on :root; these
   win on <html data-theme="light">, which js/theme.js sets before the first paint from the saved choice
   (a first visit is dark). A public page's own light rules come after this file and may refine a token.
   The member's own colour is not here: js/theme.js computes it per theme (--color-primary-*). Contrast
   ratios of every pair: specs/010-light-theme/research.md R5. */
html[data-theme="light"] {
  color-scheme: light;
  --bg:          #F6F2EA;   /* the page: cream */
  --surf:        #FFFDF8;   /* cards, panels, the header */
  --surf2:       #F0E9DC;   /* chips, tiles, secondary buttons */
  --surf-hover:  #EAE2D3;
  --side:        #F2ECE1;   /* the menu column and the logo cell */
  --border:      #E3DACB;
  --border-sub:  #ECE5D9;
  --border-strong:#CBBFAB;  /* form fields */
  --text:        #221E1A;   /* 16.3:1 on cards */
  --muted:       #675E54;   /* ≥ 4.9:1 on every light surface */
  /* status inks: ≥ 4.6:1 as text, also on their own 15 % tint over --surf2 */
  --red:         #A32D24;
  --green:       #176638;
  --gold:        #78530B;
  --purple:      #6A3DB5;
  --blue:        #225B9D;
  --gold-fill:   #E9A92A;   /* gold as a surface, with dark text (8:1) */
  --brand:       #C2362B;   /* the warm brand red: logo, ribbons, fills; the official red preset in light */
  --brand-ink:   #A32D24;   /* the brand red as text and outlines */
  --scrim:       rgba(43, 33, 22, .42);
  /* elevation: warm brown, never black */
  --e1: 0 1px 2px rgba(74, 52, 28, .07), 0 2px 8px rgba(74, 52, 28, .05);
  --e2: 0 2px 6px rgba(74, 52, 28, .09), 0 10px 24px rgba(74, 52, 28, .09);
  --e3: 0 4px 12px rgba(74, 52, 28, .10), 0 18px 48px rgba(74, 52, 28, .16);

  /* the public pages' language flags (lang.css --lf-*) */
  --lf-bg:      rgba(255, 253, 248, .86);
  --lf-border:  #E3DACB;
  --lf-muted:   #675E54;
  --lf-text:    #221E1A;
  --lf-hover:   #F0E9DC;
  --lf-on-bg:   color-mix(in srgb, var(--color-primary, #C2362B) 14%, transparent);
  --lf-on-text: #221E1A;
  --lf-on-ring: var(--color-primary-ink, #A32D24);
}

/* One logo per theme: both are in the page, the other one is hidden (the light one is loading="lazy",
   so a dark page never downloads it). Dark: today's art. Light: one solid red, no plate
   (.documentation/brand/logo-light.js). */
html[data-theme="light"] .theme-dark-only { display: none !important; }
html:not([data-theme="light"]) .theme-light-only { display: none !important; }

html[data-theme="light"] .lang-flags svg { box-shadow: 0 0 0 1px rgba(74, 52, 28, .22); }