/* ==========================================================================
   AURALGO — SHARED THEME
   Design tokens + reusable components for index.html and admin.html.
   Load BEFORE each file's own page-specific <style> block so local styles
   can extend/override where needed.
   ========================================================================== */

:root {
  /* Typography — Inter for everything readable (nav, body, labels,
     buttons, badges); Space Grotesk for headlines only; JetBrains Mono
     reserved for tabular numeric data (prices, P&L, tickers) where fixed
     digit width actually helps scanability. Monospace-for-everything was
     a leftover from the old dark/terminal aesthetic and reads as a hobby
     project, not a product handling money — see fable design review. */
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',-apple-system,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* Brand palette — light mode, blue as the primary trust accent.
     Real competitors in this exact category (Duplikium, 3Commas) both
     use light+blue, not dark+gold — and blue is the industry-default
     trust color for fintech generally (Stripe's own palette: #0A2540
     navy text, #2563EB-range blue accent). Variable NAMES kept as
     --gold/--bg/--text etc. so the hundreds of existing var() references
     across index.html/admin.html don't need to be touched — only the
     VALUES changed. */
  --gold:#2563EB; --gold-l:#3B82F6; --gold-d:#1D4ED8;
  --bg:#FFFFFF; --bg2:#F7F9FC; --bg3:#EEF2F7; --bg4:#E4E9F0;
  --border:rgba(10,37,64,0.10); --border2:rgba(10,37,64,0.06); --border3:rgba(10,37,64,0.16);
  --text:#0A2540; --text2:#5B6B82; --text3:#94A3B8;
  --green:#0C9D5B; --green-bg:rgba(12,157,91,0.08); --green-border:rgba(12,157,91,0.22);
  --red:#DC2626; --red-bg:rgba(220,38,38,0.08); --red-border:rgba(220,38,38,0.22);

  /* Geometry */
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;

  /* Elevation & motion — light mode uses soft, low-opacity shadows
     instead of the heavy dark-mode drop shadows */
  --shadow-card:0 1px 2px rgba(10,37,64,0.04), 0 8px 20px rgba(10,37,64,0.06);
  --shadow-gold:0 4px 14px rgba(37,99,235,0.18);
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:0.15s var(--ease);
  --t-med:0.25s var(--ease);

  /* Spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
}

/* ---------- RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
}
/* Decorative background orbs/noise texture removed for a calmer, more
   minimal surface — these were pure decoration with no informational
   value. Classes kept as no-ops so existing markup doesn't need editing. */
.orb{display:none;}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border3);border-radius:3px;}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fi{animation:fadeUp 0.5s var(--ease) forwards;}

/* ---------- BUTTONS ---------- */
.btn{
  padding:11px 22px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:15px;font-weight:600;
  cursor:pointer;transition:all var(--t-fast);border:none;letter-spacing:normal;
}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);border-color:var(--gold);}
.btn-gold{background:linear-gradient(135deg,var(--gold-l),var(--gold-d));color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(37,99,235,0.28);}
.btn-gold:hover{background:linear-gradient(135deg,var(--gold-l),var(--gold));transform:translateY(-1px);box-shadow:var(--shadow-gold);}
.btn-full{width:100%;padding:15px;font-size:16px;margin-top:8px;border-radius:var(--radius-sm);}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.btn-danger:hover{background:rgba(232,69,69,0.18);}
.btn:active{transform:translateY(0);}

/* Small utility buttons (admin action buttons) */
.rbtn,.abtn{
  background:transparent;border:1px solid var(--border2);color:var(--text2);
  padding:6px 14px;border-radius:var(--radius-xs);font-size:13px;font-weight:500;cursor:pointer;
  font-family:var(--font-body);white-space:nowrap;transition:all var(--t-fast);
}
.abtn{padding:4px 10px;font-size:13px;}
.rbtn:hover,.abtn:hover{border-color:var(--gold);color:var(--gold);}
.rbtn-gold,.abtn-gold{border-color:rgba(37,99,235,0.4);color:var(--gold);}
.rbtn-gold:hover,.abtn-gold:hover{background:var(--border2);}
.rbtn-red,.abtn-red{border-color:var(--red-border);color:var(--red);}
.abtn-red:hover{background:var(--red-bg);}
.abtn-green{border-color:var(--green-border);color:var(--green);}
.abtn-green:hover{background:var(--green-bg);}

/* ---------- FORM GROUPS ---------- */
.fg{margin-bottom:16px;}
.fg label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.06em;}
.fg input,.fg select,.fg textarea{
  width:100%;padding:13px 16px;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);font-family:var(--font-body);font-size:15px;
  outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(37,99,235,0.12);}
.fg select option{background:var(--bg3);}
.fg textarea{resize:vertical;min-height:120px;}

.pw-wrap{position:relative;display:block;}
.pw-wrap input{padding-right:44px!important;width:100%;}
.eye-btn{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;color:var(--text2);padding:4px;display:flex;align-items:center;transition:color var(--t-fast);
}
.eye-btn:hover{color:var(--gold);}

/* ---------- ALERTS ---------- */
.alert{padding:13px 16px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:18px;display:none;}
.alert.show{display:block;}
.a-ok{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);}
.a-err{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red);}

/* ---------- BADGES ---------- */
.badge{display:inline-flex;padding:4px 10px;border-radius:var(--radius-pill);font-size:13px;font-weight:500;letter-spacing:normal;}
.b-g{background:var(--green-bg);color:var(--green);}
.b-r{background:var(--red-bg);color:var(--red);}
.b-o{background:rgba(37,99,235,0.1);color:var(--gold);}
.b-x{background:rgba(138,132,120,0.1);color:var(--text2);}

/* ---------- TOGGLE SWITCH ---------- */
.tog{position:relative;width:56px;height:28px;cursor:pointer;display:inline-block;flex:0 0 auto;}
.tog input{display:none;}
.t-track{position:absolute;inset:0;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-pill);transition:all var(--t-med);}
.tog input:checked+.t-track{background:var(--gold);border-color:var(--gold);}
.t-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--text2);border-radius:50%;transition:all var(--t-med);pointer-events:none;}
.tog input:checked~.t-thumb{left:31px;background:#fff;}

/* ---------- TABLES ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-family:var(--font-body);}
th{padding:12px 16px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text2);border-bottom:1px solid var(--border2);background:var(--bg3);white-space:nowrap;}
td{padding:13px 16px;font-size:14px;border-bottom:1px solid var(--border2);font-variant-numeric:tabular-nums;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(37,99,235,0.03);}

/* ---------- SHARED RESPONSIVE ---------- */
@media(max-width:768px){
  .btn{font-size:14px;padding:10px 18px;}
  th,td{padding:10px 12px;font-size:13px;}
  .fg input,.fg select,.fg textarea{font-size:15px;padding:12px 14px;}
}
@media(max-width:480px){
  th,td{padding:8px 10px;font-size:12px;}
}