/* ── FEATURE-47 — the dark theme: arcade at night (specs/013-dark-theme) ───────────────────────────────
   A near-black page, cards one step up, bright text, neon red and gold. Dark is the base theme: these
   tokens are what every page (the app and the public pages) shows when nothing says light, and
   css/light.css overrides the same names on <html data-theme="light"> (FEATURE-43, unchanged). A page
   keeps only its own extra names on :root. The member's own colour is not here: js/theme.js computes it
   per theme (--color-primary-*); the values below are its fallback before that script runs.
   The app's own dark rules: the FEATURE-47 section of css/app.css. Contrast ratios of every pair:
   specs/013-dark-theme/research.md R4. */
:root {
  color-scheme: dark;
  --bg:          #0B0A0D;   /* the page: near-black */
  --surf:        #15131A;   /* cards, panels, the header, dialogs: one step up */
  --surf2:       #1E1B25;   /* chips, tiles, secondary buttons */
  --surf-hover:  #27232F;
  --side:        #08070A;   /* the menu column and the logo cell: the black */
  --border:      #2A2530;
  --border-sub:  #1F1C25;   /* hairlines */
  --border-strong:#3A3344;  /* form fields */
  --text:        #F5F2FA;   /* 16.6:1 on cards */
  --muted:       #9A93A8;   /* ≥ 5.2:1 on every dark surface */
  /* status inks: ≥ 4.6:1 as text, also on their own 15 % tint over --surf2 */
  --red:         #FF5F6E;
  --green:       #3DDC84;
  --gold:        #FFC23D;
  --purple:      #B48CFF;
  --blue:        #5CADFF;
  --gold-fill:   #FFC23D;   /* gold as a surface, with near-black text (12:1) */
  --brand:       #FF4D5E;   /* the neon red: logo, ribbons, fills, glows; the official red preset in dark */
  --brand-ink:   #FF5F6E;   /* the neon red as text and outlines (#FF4D5E is 4.3:1 on its own tint) */
  --scrim:       rgba(4, 3, 7, .74);
  /* elevation: black and deep; on near-black the edges and a 1 px top highlight do the lifting */
  --e1: inset 0 1px 0 rgba(255, 255, 255, .035), 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .32);
  --e2: 0 2px 6px rgba(0, 0, 0, .55), 0 12px 28px rgba(0, 0, 0, .5);
  --e3: 0 4px 12px rgba(0, 0, 0, .6), 0 20px 56px rgba(0, 0, 0, .72);
  /* neon: soft, static halos (never on body text) */
  --glow-brand:   0 0 14px -2px color-mix(in srgb, var(--brand) 70%, transparent);
  --glow-primary: 0 0 18px -4px color-mix(in srgb, var(--color-primary) 70%, transparent);

  /* the member's colour before js/theme.js runs: the official preset in dark */
  --color-primary:          #ff4d5e;
  --color-primary-hover:    #ff6271;
  --color-primary-active:   #ff7481;
  --color-primary-light:    rgba(255, 77, 94, .14);
  --color-primary-contrast: #0b0a0d;
  --color-primary-ink:      #ff5b6b;
  --color-focus:            #ff4d5e4d;

  /* the public pages' language flags (lang.css --lf-*) */
  --lf-bg:      rgba(21, 19, 26, .78);
  --lf-border:  #2A2530;
  --lf-muted:   #A9A3B6;
  --lf-text:    #F5F2FA;
  --lf-hover:   #1E1B25;
  --lf-on-bg:   color-mix(in srgb, var(--color-primary) 18%, transparent);
  --lf-on-text: #F5F2FA;
  --lf-on-ring: color-mix(in srgb, var(--color-primary-ink) 75%, transparent);
}