/* ======= GLOBAL THEME — KingRockOTP OTP (Blue / White) ======= */
/* Palette: Primary #3B82F6 · Accent #38BDF8 · BG #FFFFFF · Card #F9FAFB · Text #111827
   Light is now the default. Dark kept as an optional [data-theme="dark"]. */

:root, [data-theme="light"] {
  --bg:        #FFFFFF;
  --surface:   #F9FAFB;   /* card */
  --surface2:  #F3F4F6;
  --border:    #E5E7EB;
  --text:      #111827;
  --muted:     #6B7280;

  --accent:    #3B82F6;   /* primary */
  --accent-d:  #2563EB;
  --accent2:   #38BDF8;   /* accent / cyan */

  --blue:      #3B82F6;
  --green:     #3B82F6;
  --green-d:   #2563EB;
  --amber:     #F59E0B;
  --red:       #EF4444;
  --purple:    #6366F1;

  --shadow:    0 4px 20px rgba(17,24,39,.06);
  --shadow-lg: 0 12px 40px rgba(17,24,39,.10);
  --header-bg: rgba(255,255,255,.92);
  --nav-bg:    rgba(255,255,255,.96);
  --hero-grad: linear-gradient(140deg,#3B82F6 0%,#38BDF8 100%);
  --card-hover:#F3F4F6;
  --green-xl:  #DBEAFE;
}

/* ── Optional DARK ── */
[data-theme="dark"] {
  --bg:        #0B1220;
  --surface:   #111827;
  --surface2:  #1F2937;
  --border:    #253044;
  --text:      #E6EDF3;
  --muted:     #94A3B8;

  --accent:    #3B82F6;
  --accent-d:  #2563EB;
  --accent2:   #38BDF8;

  --blue:      #3B82F6;
  --green:     #3B82F6;
  --green-d:   #60A5FA;
  --amber:     #FBBF24;
  --red:       #F87171;
  --purple:    #818CF8;

  --shadow:    0 4px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  --header-bg: rgba(11,18,32,.92);
  --nav-bg:    rgba(17,24,39,.96);
  --hero-grad: linear-gradient(140deg,#1E3A8A 0%,#0EA5E9 100%);
  --card-hover:#1B2434;
  --green-xl:  #1E3A5F;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  transition: background .3s, color .3s;
}