/* design-tokens-bridge.css
   Include on onboard.html, index.html (dashboard), and admin-biz.html, AFTER each page's own
   :root and [data-theme="light"] blocks. Fills in whichever naming convention the host page is
   missing (short: --bg/--t1/--bd from onboarding; long: --bg-primary/--text-primary/--border
   from the dashboard) so a component written against either convention resolves correctly on
   any of the three pages — admin, which defines neither today, gets both.

   Deliberately uses plain literal values here, NOT var()-to-var() aliasing. Custom properties
   that reference each other as fallbacks are a known CSS foot-gun: if a page ever legitimately
   defines both names for the same concept, a var()-alias approach silently overrides one with
   the other in a cascade-order-dependent way that differs between dark and light blocks. Plain
   literals side-step that entirely — every rule here is a normal, unambiguous CSS declaration.
   This means: if you rename a color anywhere, update it in the THREE places table in
   ApunkAI_CrossFlow_Sync_Bugs_and_Fixes.md §4 and re-sync this file — it is a values bridge,
   not a live alias, by design. */

:root {
  --bg:  #0f172a; --bg-primary:   #0f172a;
  --bg2: #1e293b; --bg-secondary: #1e293b;
  --bg3: #334155; --bg-tertiary:  #334155;
  --bgh: #475569; --bg-hover:     #475569;

  --t1: #f1f5f9; --text-primary:   #f1f5f9;
  --t2: #cbd5e1; --text-secondary: #cbd5e1;
  --t3: #94a3b8; --text-tertiary:  #94a3b8;

  --bd:  #334155; --border:       #334155;
  --bd2: #475569; --border-light: #475569;

  --primary: #2563eb; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6;
}

[data-theme="light"] {
  --bg:  #f8fafc; --bg-primary:   #f8fafc;
  --bg2: #ffffff; --bg-secondary: #ffffff;
  --bg3: #f1f5f9; --bg-tertiary:  #f1f5f9;
  --bgh: #e2e8f0; --bg-hover:     #e2e8f0;

  --t1: #0f172a; --text-primary:   #0f172a;
  --t2: #475569; --text-secondary: #475569;
  --t3: #64748b; --text-tertiary:  #64748b;

  --bd:  #e2e8f0; --border:       #e2e8f0;
  --bd2: #cbd5e1; --border-light: #cbd5e1;
}