/* =========================================================
   Kavopay shared theme
   Link this on every page (after Font Awesome / fonts, before
   the page's own <style> block) so all pages share one palette:

     <link rel="stylesheet" href="theme.css">
     <script src="theme.js"></script>

   Default = light "creamy" mode. Add data-theme="dark" to <html>
   (theme.js does this for you from localStorage) to switch.
   ========================================================= */

:root{
  /* ---- brand accent (same in both modes) ---- */
  --accent:    #0E8F86;
  --accent-2:  #1AABA0;
  --gold:      #C89A3A;

  /* ---- surfaces ---- */
  --page-bg:   #FAF5EA;
  --page-bg-2: #FAF5EA;
  --card-bg:   #FFFFFF;
  --card-bg-2: #FFFFFF;
  --nav-bg:    #FFFFFF;
  --sheet-bg:  #FFFFFF;

  /* ---- text ---- */
  --text:      #152238;
  --muted:     rgba(21,34,56,0.62);
  --muted-2:   rgba(21,34,56,0.46);
  --stroke:    rgba(21,34,56,0.10);

  /* ---- status ---- */
  --green:  #16a34a;
  --red:    #dc2626;
  --refund: #C89A3A;

  /* ---- shadows / glow ---- */
  --shadow-1: rgba(11,27,46,0.12);
  --shadow-2: rgba(11,27,46,0.08);
  --glow:     rgba(14,143,134,0.14);

  /* ---- rgb triplets (for rgba(var(--x), alpha)) ---- */
  --veil-rgb: 11,27,46;     /* generic translucent panel tint on this bg */
  --text-rgb: 21,34,56;     /* matches --text, for rgba(var(--text-rgb),a) */
  --bg-rgb:   250,245,234;  /* matches --page-bg, for "cutout ring" shadows */
  --nav-rgb:  255,255,255;  /* matches --nav-bg / --sheet-bg */

  /* ---- form inputs / status (used by sign.html) ---- */
  --input-bg:       rgba(255,255,255,0.92);
  --input-bg-solid: #F2ECDC;
  --input-border:   rgba(11,27,46,0.16);
  --error:          #dc2626;
  --success:        #0E8F86;

  /* ---- radii (not theme-dependent, kept here for one source of truth) ---- */
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 12px;
}

[data-theme="dark"]{
  --accent:    #1aaba0;
  --accent-2:  #22d3c5;
  --gold:      #C89A3A;

  --page-bg:   #071427;
  --page-bg-2: #071427;
  --card-bg:   #0b2440;
  --card-bg-2: #0a1f37;
  --nav-bg:    #071a33;
  --sheet-bg:  #071a33;

  --text:      #eaf2ff;
  --muted:     rgba(234,242,255,0.70);
  --muted-2:   rgba(234,242,255,0.55);
  --stroke:    rgba(255,255,255,0.07);

  --green:  #22c55e;
  --red:    #ff6b6b;
  --refund: #fbbf24;

  --shadow-1: rgba(0,0,0,0.35);
  --shadow-2: rgba(0,0,0,0.25);
  --glow:     rgba(26,171,160,0.22);

  --veil-rgb: 255,255,255;
  --text-rgb: 234,242,255;
  --bg-rgb:   7,20,39;
  --nav-rgb:  7,26,51;

  --input-bg:       rgba(255,255,255,0.05);
  --input-bg-solid: #0f2740;
  --input-border:   rgba(255,255,255,0.09);
  --error:          #ff6b6b;
  --success:        #22d3c5;
}

/* ===== Reusable theme-toggle switch (side menu, settings, etc.) ===== */
.theme-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
  padding:12px 10px;
  border-radius:12px;
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
}
.theme-row .theme-row-label{ display:flex; align-items:center; gap:12px; }
.theme-row .theme-row-label i{ width:18px; text-align:center; color:var(--accent-2); font-size:16px; }

.theme-switch{
  position:relative;
  width:46px; height:26px;
  border-radius:999px;
  background: rgba(var(--veil-rgb),0.14);
  border:1px solid var(--stroke);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  flex:0 0 auto;
}
.theme-switch .knob{
  position:absolute;
  top:2px; left:2px;
  width:20px; height:20px;
  border-radius:50%;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: transform .18s ease;
}
[data-theme="dark"] .theme-switch .knob{ transform: translateX(20px); }

/* ===== Kill browser autofill white/blue flash — applies to every input on every page ===== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-solid) inset;
  box-shadow: 0 0 0px 1000px var(--input-bg-solid) inset;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
  caret-color: var(--text);
}
