/* ============================================================
   USEF DESIGN TOKENS v1.0 — 2026-07-22
   Hybrid system chosen by Ahmad:
     PUBLIC surface = "Refined Navy"  (institutional, serif display)
     APP surface    = "Warm Welcome"  (warm paper, rounded, light+dark)
   One brand underneath. Components read ONLY the theme variables,
   so the same component renders correctly on every surface.
   ============================================================ */

:root{
  /* ---- brand ramps (the ONLY raw colors allowed in code) ---- */
  --usef-navy-900:#0D2340;   /* deep bands, footers */
  --usef-navy-700:#16375F;   /* public primary */
  --usef-navy-500:#3A5A8C;   /* app secondary / soft navy */
  --usef-navy-300:#8FA6C6;
  --usef-navy-100:#DCE5F1;

  --usef-red-700:#9B0E22;    /* pressed / hover on red */
  --usef-red-600:#C8102E;    /* THE brand red (public accent) */
  --usef-red-500:#BE4A40;    /* warm red (app primary) */
  --usef-red-100:#F8E9EC;

  --usef-gold-300:#F4D58A;   /* light gold (foil sheen highlight) */
  --usef-gold-500:#E4B04A;   /* highlights, app badges */
  --usef-gold-700:#8A6B26;   /* gold as readable text */

  /* silver ramp — sponsor tiers / metallic accents */
  --usef-silver-300:#E7EDF4;
  --usef-silver-500:#C2CDDA;
  --usef-silver-700:#8FA0B2;

  /* platinum ramp — the TOP sponsor tier. Deliberately brighter and more
     neutral than silver at every step, so the two metals can never read as
     the same tier when they sit in one lineup. The shade stop is kept this
     light on purpose: it is the darkest pixel the foil ever paints, and it
     has to clear 4.5:1 against the brightest frame of the convention hero
     video (measured worst case rgb(99,100,113) → 4.72:1). */
  --usef-platinum-300:#FFFFFF;
  --usef-platinum-500:#F2F3F6;
  --usef-platinum-700:#E4E7EC;

  /* semantic hues (state colors — never used as decoration) */
  --usef-green-600:#0F7B4B;  /* success */
  --usef-amber-700:#7A4E00;  /* pending / warning text */
  --usef-danger-600:#B3261E; /* destructive */

  /* ---- spacing: 8pt scale (4px half-step) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* ---- type scale ---- */
  --fs-h1:clamp(28px,5vw,40px);
  --fs-h2:clamp(20px,3vw,26px);
  --fs-h3:17px;
  --fs-body:15px;
  --fs-small:13px;
  --fs-tiny:11px;

  /* system font stacks (site policy: no webfonts = zero load cost) */
  --font-sans:'Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-serif:Georgia,'Times New Roman','Noto Serif',serif;
}

/* ============================================================
   SURFACE 1 — PUBLIC  (Refined Navy)
   Wrap public pages in .usef-public
   ============================================================ */
.usef-public{
  --bg:#F6F8FB;            /* page background (cool white) */
  --surface:#FFFFFF;       /* cards, panels */
  --ink:#132A47;           /* main text */
  --muted:#54657E;         /* secondary text */
  --border:#DEE5EF;

  --primary:var(--usef-navy-700);  --primary-ink:#FFFFFF;
  --secondary:var(--usef-navy-500);
  --outline:var(--usef-navy-700);  /* secondary + ghost buttons */
  --accent:var(--usef-red-600);    --accent-ink:#FFFFFF;  /* Donate, key CTAs */
  --link:var(--usef-red-600);

  --deep:var(--usef-navy-900);     --deep-ink:#EDF1F8;    /* dark bands */
  --tint:#EDF2F9;          /* icon tiles, soft fills */
  --alt:#EFF3F8;           /* alternate section bg */
  --gold:var(--usef-gold-500);

  --ok:var(--usef-green-600);   --ok-bg:#E4F2EB;
  --warn:var(--usef-amber-700); --warn-bg:#FAF0DB;
  --danger:var(--usef-danger-600); --danger-bg:#FBEAE8;

  --r-card:10px; --r-btn:8px; --r-field:8px;
  --shadow:0 1px 2px rgba(13,35,64,.06);
  --shadow-pop:0 18px 44px rgba(13,35,64,.22);
  --scrim:rgba(13,35,64,.55);
  --focus:var(--usef-navy-700);

  --font-display:var(--font-serif);
  --display-weight:700;

  font-family:var(--font-sans);
  background:var(--bg); color:var(--ink);
}

/* ============================================================
   SURFACE 2 — APP  (Warm Welcome)  ·  light + dark
   Wrap signed-in screens in .usef-app data-theme="light|dark".
   IMPORTANT: overlays/popups mounted outside the app container
   must ALSO carry class usef-app + data-theme (the wn-card lesson).
   ============================================================ */
.usef-app,
.usef-app[data-theme="light"]{
  --bg:#FAF5EE;            /* warm paper */
  --surface:#FFFFFF;
  --ink:#2B3145;
  --muted:#6E6A61;
  --border:#ECE3D4;

  --primary:var(--usef-red-500);   --primary-ink:#FFFFFF;
  --secondary:var(--usef-navy-500);
  --outline:var(--usef-navy-500);  /* secondary + ghost = calm navy, so red keeps meaning */
  --accent:var(--usef-red-500);    --accent-ink:#FFFFFF;
  --link:#A93E35;

  --deep:var(--usef-navy-500);     --deep-ink:#F3F6FC;
  --tint:#F6EDE0;
  --alt:#F3ECDF;
  --gold:var(--usef-gold-500);

  /* --ok was #2E7D4F: the green "Active" badge (--ok on --ok-bg) measured 4.38:1,
     under the contract's 4.5:1 (logged in CLAUDE.md; fixed 2026-08-11, Wasila A6).
     #276C44 measures 5.50 on --ok-bg and keeps white readable on a solid --ok
     fill (6.34). The dark pair already measured 6.99 and is untouched. */
  --ok:#276C44;   --ok-bg:#E6F2E9;
  --warn:var(--usef-amber-700); --warn-bg:#FBEED6;
  --danger:var(--usef-danger-600); --danger-bg:#FAEAE8;

  --r-card:16px; --r-btn:999px; --r-field:12px;
  --shadow:0 6px 16px rgba(43,49,69,.07);
  --shadow-pop:0 18px 44px rgba(43,49,69,.28);
  --scrim:rgba(43,49,69,.45);
  --focus:var(--usef-red-500);

  --font-display:var(--font-sans);
  --display-weight:800;

  font-family:var(--font-sans);
  background:var(--bg); color:var(--ink);
}

.usef-app[data-theme="dark"]{
  --bg:#1C1913;            /* warm dark, not cold black */
  --surface:#262117;
  --ink:#F1EBDF;
  --muted:#A89E8C;
  --border:#3A3327;

  --primary:var(--usef-red-500);   --primary-ink:#FFFFFF;
  --secondary:#8FB0DE;
  --outline:#8FB0DE;
  --accent:var(--usef-red-500);    --accent-ink:#FFFFFF;
  --link:#E5938B;

  --deep:#11253E;                  --deep-ink:#E8EDF6;
  --tint:#332C1E;
  --alt:#221E15;
  --gold:#D9A94C;

  --ok:#7BCFA0;   --ok-bg:#22352B;
  --warn:#E4B04A; --warn-bg:#3A2F1C;
  --danger:#F0A099; --danger-bg:#3A2320;

  --r-card:16px; --r-btn:999px; --r-field:12px;
  --shadow:0 6px 16px rgba(0,0,0,.35);
  --shadow-pop:0 18px 44px rgba(0,0,0,.5);
  --scrim:rgba(0,0,0,.6);
  --focus:var(--usef-gold-500);

  --font-display:var(--font-sans);
  --display-weight:800;

  font-family:var(--font-sans);
  background:var(--bg); color:var(--ink);
}

/* ---------------------------------------------------------------------------
   dashboard.html defines its own theme tokens on .dash-app and does NOT inherit
   the .usef-app set, so --primary-ink was undefined there. A `color:var(--primary-ink)`
   in that scope is an INVALID declaration, which silently inherits --ink instead:
   dark text on a navy fill, measured at 1.33:1 before this was added. design:check
   greps for raw hex and cannot see an undefined token, so nothing caught it.
   Text sitting on a solid navy or red fill uses this.
   --------------------------------------------------------------------------- */
.dash-app[data-theme="light"],
.dash-app[data-theme="dark"]{ --primary-ink:#FFFFFF; }

/* ---------------------------------------------------------------------------
   Scannable codes (the review desk's phone QR). A QR must stay dark-on-paper in
   BOTH themes — a light-on-dark QR reads fine to a person and fails in a phone
   camera. These two exist so no screen ever hardcodes that pair.
   --------------------------------------------------------------------------- */
.usef-app[data-theme="light"],
.usef-app[data-theme="dark"]{ --scan-paper:#FFFFFF; --scan-ink:#101010; }