/* ═══════════════════════════════════════════════════════════════════════
   AccessStack — Light / Tech Theme  v1.0
   Loaded LAST. Re-points the existing design tokens at a white palette and
   patches the few places that hardcoded dark values. To revert to the dark
   theme, remove this stylesheet's enqueue in includes/class-assets.php.

   Fonts:  Plus Jakarta Sans (interface + headings)  ·  Inter (fallback)  ·  JetBrains Mono (data)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─────────────────────────────────────────────────────── */
:root {
  --bg-primary:       #f6f8fb;
  --bg-secondary:     #ffffff;
  --bg-card:          #ffffff;
  --bg-card-hover:    #f8fafc;
  --bg-input:         #f8fafc;
  --bg-elevated:      #eef2f7;

  --accent:           #2563eb;
  --accent-hover:     #1d4ed8;
  --accent-glow:      rgba(37,99,235,0.12);
  --accent-glow-soft: rgba(37,99,235,0.05);
  --accent-border:    rgba(37,99,235,0.28);

  --text-primary:     #0b1220;
  --text-secondary:   #475569;
  --text-muted:       #566478;
  --text-link:        #1d4ed8;

  --border-color:     #e2e8f0;
  --border-subtle:    #eef2f7;
  --border-strong:    #cbd5e1;

  --green:            #047857;
  --green-bg:         rgba(5,150,105,0.08);
  --green-border:     rgba(5,150,105,0.25);
  --red:              #dc2626;
  --red-bg:           rgba(220,38,38,0.07);
  --red-border:       rgba(220,38,38,0.22);
  --yellow:           #b45309;
  --yellow-bg:        rgba(217,119,6,0.09);
  --purple:           #6d28d9;
  --cyan:             #0891b2;

  --radius:           12px;
  --radius-sm:        8px;

  --shadow-sm:        0 1px 2px rgba(15,23,42,0.06);
  --shadow:           0 2px 8px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg:        0 12px 32px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.05);
  --shadow-blue:      0 6px 20px rgba(37,99,235,0.22);
  --shadow-card:      0 1px 2px rgba(15,23,42,0.05), 0 4px 14px rgba(15,23,42,0.05);

  /* Plus Jakarta Sans for the whole site. Inter is the fallback because it reliably includes the Naira sign. */
  --font:         'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Navbar tokens (navbar.css) */
  --nav-bg:     rgba(255,255,255,0.86);
  --nav-border: #e2e8f0;
  --nav-accent: #2563eb;
  --nav-text:   #475569;
  --nav-active: #0b1220;
  --nav-green:  #047857;
}

/* ─── 2. BASE — white canvas with a faint engineering grid ─────────── */
html {
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(37,99,235,0.07) 0%, transparent 70%),
    linear-gradient(rgba(15,23,42,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.035) 1px, transparent 1px) !important;
  background-size: 100% 100%, 44px 44px, 44px 44px !important;
  background-attachment: fixed !important;
}
body, body.page, body.home, body.logged-in { font-feature-settings: 'cv11', 'ss01'; }

#wpadminbar { background: #1d2327 !important; }

body, button, input, select, textarea { font-family: var(--font); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
h1 { letter-spacing: -0.03em; }

/* Data reads like data: balances, prices, IDs, credentials */
.as-topnav-balance, .as-topnav-mobile-bal,
#as-fund-balance, .as-stat-card-val, .as-price, .as-svc-price,
.as-data-row strong, .as-delivery-card code, .as-order-id,
.as-table td code, code, kbd, pre {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}
.as-topnav-balance, .as-topnav-mobile-bal { letter-spacing: -0.01em; }

/* ─── 3. NAVBAR — frosted white ─────────────────────────────────────── */
.as-topnav {
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--nav-border), 0 6px 24px rgba(15,23,42,0.04);
}
.as-topnav-link:hover        { background: rgba(15,23,42,0.05); }
.as-topnav-mobile-link:hover { background: rgba(15,23,42,0.04); }
.as-topnav-hamburger, .as-topnav-toggle { background: rgba(15,23,42,0.04); }
.as-topnav-balance { background: var(--green-bg); border-color: var(--green-border); }

/* ─── 4. SURFACES ───────────────────────────────────────────────────── */
.as-card, .as-stat-card, .as-delivery-card, .as-fund-card, .as-fund-info,
.as-svc-card, .as-product-card, .as-dash-section {
  box-shadow: var(--shadow-card);
}
.as-table th                 { background: #f1f5f9; }
.as-table tbody tr:hover td  { background: #f8fafc; }
.as-tab:hover                { background: rgba(15,23,42,0.04); }
.as-market-tabs .as-tab      { background: #fff; }

/* toolbar strips that were tinted with white-alpha on dark */
.as-table-toolbar, .as-toolbar, .as-filter-bar { background: #f8fafc; }

/* ─── 5. BUTTONS ────────────────────────────────────────────────────── */
.as-btn-primary {
  background: linear-gradient(180deg, #2f6df0 0%, var(--accent) 100%);
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
.as-btn-primary:hover {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  box-shadow: var(--shadow-blue);
}
.as-btn-ghost, .as-btn-secondary, .as-copy-btn {
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.as-btn-ghost:hover, .as-btn-secondary:hover { background: #f1f5f9; border-color: var(--accent-border); }

/* ─── 6. FORMS ──────────────────────────────────────────────────────── */
.as-input, .as-select, .as-textarea,
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], select, textarea {
  background: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.as-input::placeholder, input::placeholder, textarea::placeholder { color: #5f6e83; }
.as-input:focus, .as-select:focus, .as-textarea:focus, input:focus, select:focus, textarea:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}

/* ─── 7. HERO / AUTH — dark dot-grid becomes a light one ────────────── */
.as-hero::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(37,99,235,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 85% 100%, rgba(8,145,178,0.08) 0%, transparent 60%) !important;
}
.as-hero::after {
  background-image: radial-gradient(circle, rgba(15,23,42,0.10) 1px, transparent 1px) !important;
}
.as-auth-wrap, .as-auth-page {
  background-image: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(37,99,235,0.08) 0%, transparent 65%) !important;
}

/* ─── 8. SEMANTIC / MISC ────────────────────────────────────────────── */
.as-tier-progress-bar { background: rgba(15,23,42,0.08); }
.as-cat-card-dot      { box-shadow: 0 0 0 3px rgba(5,150,105,0.15); }
.as-cat-card-stock.out .as-cat-card-dot { box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.as-market-tabs.as-category-grid .as-tab.as-cat-card.active {
  background: linear-gradient(135deg, rgba(37,99,235,0.07) 0%, #fff 100%);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(37,99,235,0.14);
}
::selection { background: var(--accent); color: #fff; }

/* Soft, thin scrollbars that suit a light UI */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid var(--bg-primary); }