/* =========================================================
   BakarePay — design tokens
   ---------------------------------------------------------
   THE BRAND LIVES IN THE TWO "BRAND" BLOCKS BELOW.
   Change --brand / --brand-2 / --brand-ink (light and dark)
   and every page re-themes: buttons, links, active nav,
   gradients, glows, the wallet hero, charts and focus rings
   are all derived from these values.
   ========================================================= */

:root {
  /* ---- BRAND · light theme (from the logo: navy #122861, sky #31ACE8) ---- */
  --brand:      #1A3A8F;   /* primary: buttons, links, active states   */
  --brand-2:    #2196D9;   /* accent: second stop of the gradient       */
  --brand-ink:  #FFFFFF;   /* text/icons sitting on a solid --brand fill */

  /* ---- Neutrals · light ---- */
  --bg:          #F5F7FB;
  --bg-soft:     #EEF1F8;
  --surface:     #FFFFFF;
  --surface-2:   #F4F6FB;
  --surface-3:   #E9EDF6;
  --border:      #E1E6F0;
  --border-soft: #EDF0F6;
  --text:        #0F172A;
  --text-muted:  #56607A;
  --text-dim:    #8A93AB;

  /* ---- Status · light ---- */
  --success: #0E9F6E;
  --danger:  #D9304A;
  --warning: #B7790A;
  --info:    #2F7BD6;

  --shadow:    0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .05);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .14);
  --backdrop:  rgba(8, 12, 28, .55);
  --theme-color: #FFFFFF;
}

:root[data-theme="dark"] {
  /* ---- BRAND · dark theme ---- */
  --brand:      #7FA4FF;
  --brand-2:    #4CC3F5;
  --brand-ink:  #06122E;

  /* ---- Neutrals · dark ---- */
  --bg:          #080B14;
  --bg-soft:     #0C111D;
  --surface:     #111827;
  --surface-2:   #172036;
  --surface-3:   #1E2944;
  --border:      #222C45;
  --border-soft: #1A2338;
  --text:        #EEF1F8;
  --text-muted:  #94A0C0;
  --text-dim:    #5F6A8C;

  /* ---- Status · dark ---- */
  --success: #2FD69A;
  --danger:  #FF5C7C;
  --warning: #FFC247;
  --info:    #4EA1FF;

  --shadow:    0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
  --backdrop:  rgba(2, 4, 12, .62);
  --theme-color: #080B14;
}

/* ---------- Derived — do not edit, change the brand above ---------- */
:root {
  --primary:       var(--brand);
  --primary-ink:   var(--brand-ink);
  --primary-soft:  color-mix(in srgb, var(--brand) 12%, transparent);
  --primary-line:  color-mix(in srgb, var(--brand) 30%, transparent);
  --accent:        var(--brand-2);
  --accent-soft:   color-mix(in srgb, var(--brand-2) 13%, transparent);
  --gradient:      linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  --gradient-soft: linear-gradient(135deg,
                     color-mix(in srgb, var(--brand) 16%, transparent),
                     color-mix(in srgb, var(--brand-2) 14%, transparent));
  --glow:          color-mix(in srgb, var(--brand) 28%, transparent);
  --glow-2:        color-mix(in srgb, var(--brand-2) 22%, transparent);

  /* Always-dark panel (wallet hero, onboarding rail, receipts' header band) */
  --hero-bg: radial-gradient(120% 140% at 0% 0%,
               color-mix(in srgb, var(--brand) 55%, #0A0F24) 0%,
               #0E1430 55%,
               color-mix(in srgb, var(--brand-2) 38%, #0A0F24) 100%);

  --success-soft: color-mix(in srgb, var(--success) 12%, transparent);
  --danger-soft:  color-mix(in srgb, var(--danger) 11%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 13%, transparent);
  --info-soft:    color-mix(in srgb, var(--info) 12%, transparent);

  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);

  /* Shape, type, layout */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Sora", "Inter", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --transition: .2s ease;

  --header-h: 74px;     /* public navbar */
  --sidebar-w: 252px;   /* app + admin sidebar */
  --topbar-h: 64px;
  --tabbar-h: 64px;
  --container: 1200px;
}