/* ============================================================
   BFA Design Tokens — v2 (Webview canonical)
   ============================================================
   v2 change: --brand now equals --accent (emerald). The Brivan-UI
   pages (home, login, admin/index, admin/login) automatically
   pick up emerald primary buttons instead of solid black — no
   per-page edits needed.

   Aliases (--ink-* / --text-*, --line / --border, etc.) kept so
   legacy markup in dashboard.php and new_request.php keeps
   rendering without edits.
   ============================================================ */

:root {
  /* ─── Surface ─────────────────────────────────────────── */
  --bg:           #fafafa;
  --bg2:          #ffffff;
  --bg3:          #f4f4f5;
  --surface:      #ffffff;
  --surface-2:    #fafafa;
  --surface-3:    #f4f4f5;

  /* ─── Ink / text ──────────────────────────────────────── */
  --text:         #18181b;
  --text2:        #3f3f46;
  --text3:        #71717a;
  --text4:        #a1a1aa;
  --ink:          #18181b;
  --ink-2:        #3f3f46;
  --ink-3:        #71717a;
  --ink-4:        #a1a1aa;

  /* ─── Lines / borders ─────────────────────────────────── */
  --border:       #e4e4e7;
  --border2:      #d4d4d8;
  --line:         #e4e4e7;
  --line-2:       #d4d4d8;

  /* ─── Action accent (EMERALD — canonical) ─────────────── */
  --accent:        #059669;
  --accent-bg:     rgba(5,150,105,.06);
  --accent-border: rgba(5,150,105,.15);
  --accent-ink:    #047857;

  /* ─── Brand (v2: now aliased to accent, was black in v1) ─ */
  --brand:        var(--accent);
  --brand-ink:    #ffffff;

  /* ─── Status colors ───────────────────────────────────── */
  --green:        #059669;
  --green-bg:     rgba(5,150,105,.06);
  --green-border: rgba(5,150,105,.15);
  --purple:       #7c3aed;
  --purple-bg:    rgba(124,58,237,.06);
  --purple-border:rgba(124,58,237,.15);

  --success:      #059669;
  --success-bg:   rgba(5,150,105,.10);
  --danger:       #ef4444;
  --danger-bg:    rgba(239,68,68,.08);
  --warn:         #d97706;
  --warn-bg:      rgba(217,119,6,.10);
  --info:         #2563eb;
  --info-bg:      rgba(37,99,235,.08);

  /* ─── Avatar (canonical — used by bfa_avatar() everywhere) ─ */
  --avatar-grad:  linear-gradient(135deg, #10b981, #047857);
  --avatar-ink:   #ffffff;

  /* ─── Premium-card surface (wallet, balance, hero stats) ─
     Stays dark in BOTH light & dark modes — it's a brand element. */
  --premium-bg:   #0a0a0b;
  --premium-ink:  #ffffff;
  --premium-sub:  rgba(255,255,255,.7);
  --premium-tint: rgba(255,255,255,.12);

  /* ─── Radii ───────────────────────────────────────────── */
  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    22px;
  --radius-pill:  999px;

  /* ─── Shadows ─────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(10,10,11,.04);
  --shadow:       0 4px 16px -4px rgba(10,10,11,.06), 0 1px 2px rgba(10,10,11,.04);
  --shadow-lg:    0 12px 32px -8px rgba(10,10,11,.10), 0 2px 6px rgba(10,10,11,.04);

  /* ─── Type ────────────────────────────────────────────── */
  --font:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fm:           ui-monospace, 'SF Mono', SFMono-Regular, monospace;
}

/* ─── Dark theme ─────────────────────────────────────────── */
[data-theme="dark"], html[data-theme="dark"] {
  --bg:           #09090b;
  --bg2:          #18181b;
  --bg3:          #27272a;
  --surface:      #18181b;
  --surface-2:    #1c1c1f;
  --surface-3:    #27272a;

  --text:         #e4e4e7;
  --text2:        #a1a1aa;
  --text3:        #71717a;
  --text4:        #52525b;
  --ink:          #e4e4e7;
  --ink-2:        #a1a1aa;
  --ink-3:        #71717a;
  --ink-4:        #52525b;

  --border:       #27272a;
  --border2:      #3f3f46;
  --line:         #27272a;
  --line-2:       #3f3f46;

  --accent:        #10b981;
  --accent-bg:     rgba(16,185,129,.10);
  --accent-border: rgba(16,185,129,.22);
  --accent-ink:    #6ee7b7;

  --green:        #10b981;
  --green-bg:     rgba(16,185,129,.10);
  --green-border: rgba(16,185,129,.22);

  --success:      #10b981;
  --success-bg:   rgba(16,185,129,.12);
  --danger-bg:    rgba(239,68,68,.12);
  --warn-bg:      rgba(217,119,6,.14);
  --info-bg:      rgba(37,99,235,.14);

  --premium-bg:   #18181b;
  --premium-ink:  #ffffff;
  --premium-sub:  rgba(255,255,255,.65);
  --premium-tint: rgba(255,255,255,.10);

  --shadow-sm:    0 1px 2px rgba(0,0,0,.3);
  --shadow:       0 4px 16px -4px rgba(0,0,0,.5);
  --shadow-lg:    0 12px 32px -8px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#09090b; --bg2:#18181b; --bg3:#27272a;
    --surface:#18181b; --surface-2:#1c1c1f; --surface-3:#27272a;
    --text:#e4e4e7; --text2:#a1a1aa; --text3:#71717a; --text4:#52525b;
    --ink:#e4e4e7; --ink-2:#a1a1aa; --ink-3:#71717a; --ink-4:#52525b;
    --border:#27272a; --border2:#3f3f46;
    --line:#27272a; --line-2:#3f3f46;
    --accent:#10b981; --accent-bg:rgba(16,185,129,.10);
    --accent-border:rgba(16,185,129,.22); --accent-ink:#6ee7b7;
    --green:#10b981; --green-bg:rgba(16,185,129,.10); --green-border:rgba(16,185,129,.22);
    --success:#10b981; --success-bg:rgba(16,185,129,.12);
    --danger-bg:rgba(239,68,68,.12); --warn-bg:rgba(217,119,6,.14); --info-bg:rgba(37,99,235,.14);
    --premium-bg:#18181b; --premium-ink:#fff; --premium-sub:rgba(255,255,255,.65); --premium-tint:rgba(255,255,255,.10);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 4px 16px -4px rgba(0,0,0,.5);
    --shadow-lg:0 12px 32px -8px rgba(0,0,0,.6);
  }
}