/* ── COMPOS Login Themes ── */
/* Usage: set data-theme="a|b|c|d" on <html> */

/* ── Base tokens (Theme A default: Amber dark) ── */
:root,[data-theme="a"]{
  --bg:        linear-gradient(160deg,#0a0e13,#121820,#1a2431);
  --hero-bg:   linear-gradient(160deg,#0b0f1a,#0d1424);
  --card-bg:   rgba(14,20,32,.97);
  --card-border:rgba(212,168,83,.2);
  --panel-border:rgba(255,255,255,.07);
  --ink:       #e8edf5;
  --ink-soft:  #8a98ab;
  --accent:    #d4a853;
  --accent-dim:rgba(212,168,83,.12);
  --accent-glow:rgba(212,168,83,.1);
  --teal:      #5a9d8f;
  --field-bg:  rgba(255,255,255,.04);
  --field-border:rgba(212,168,83,.2);
  --field-focus:rgba(212,168,83,.5);
  --field-shadow:rgba(212,168,83,.12);
  --icon-color:#5a9d8f;
  --icon-bg:   rgba(90,157,143,.1);
  --btn-bg:    linear-gradient(135deg,#b8892a,#d4a853 45%,#5a9d8f);
  --btn-color: #0b0f18;
  --btn-shadow:rgba(0,0,0,.3);
  --key-bg:    rgba(8,14,24,.9);
  --key-border:rgba(212,168,83,.08);
  --key-color: #e8edf5;
  --key-hover: rgba(212,168,83,.1);
  --key-special-bg:rgba(90,157,143,.12);
  --key-special-color:#5a9d8f;
  --tag-color: #d4a853;
  --tag-bg:    rgba(212,168,83,.1);
  --tag-border:rgba(212,168,83,.25);
  --hero-title:#e8edf5;
  --hero-em:   #d4a853;
  --hero-body: rgba(180,192,210,.6);
  --link-color:rgba(180,192,210,.5);
  --hero-grid: rgba(255,255,255,.025);
  --label-color:#d4a853;
  --body-class: dark;
}

[data-theme="b"]{
  --bg:        #f1f3f9;
  --hero-bg:   #f1f3f9;
  --card-bg:   #ffffff;
  --card-border:rgba(99,102,241,.12);
  --panel-border:#e2e8f0;
  --ink:       #0f172a;
  --ink-soft:  #64748b;
  --accent:    #4338ca;
  --accent-dim:rgba(99,102,241,.1);
  --accent-glow:rgba(99,102,241,.08);
  --teal:      #4338ca;
  --field-bg:  #fff;
  --field-border:#e2e8f0;
  --field-focus:rgba(99,102,241,.5);
  --field-shadow:rgba(99,102,241,.1);
  --icon-color:#6366f1;
  --icon-bg:   #f5f3ff;
  --btn-bg:    #4338ca;
  --btn-color: #fff;
  --btn-shadow:rgba(67,56,202,.25);
  --key-bg:    #f8fafc;
  --key-border:#e2e8f0;
  --key-color: #1e293b;
  --key-hover: #f1f5f9;
  --key-special-bg:#eef2ff;
  --key-special-color:#4338ca;
  --tag-color: #4338ca;
  --tag-bg:    rgba(99,102,241,.08);
  --tag-border:rgba(99,102,241,.2);
  --hero-title:#0f172a;
  --hero-em:   #4338ca;
  --hero-body: #64748b;
  --link-color:#94a3b8;
  --hero-grid: rgba(99,102,241,.06);
  --label-color:#4338ca;
  --body-class: light;
}

[data-theme="c"]{
  --bg:        #0d0a1e;
  --hero-bg:   #0d0a1e;
  --card-bg:   rgba(26,21,53,.97);
  --card-border:rgba(139,92,246,.3);
  --panel-border:rgba(139,92,246,.12);
  --ink:       #ede9fe;
  --ink-soft:  rgba(196,181,253,.6);
  --accent:    #a855f7;
  --accent-dim:rgba(139,92,246,.12);
  --accent-glow:rgba(139,92,246,.1);
  --teal:      #a855f7;
  --field-bg:  rgba(15,10,35,.6);
  --field-border:rgba(139,92,246,.2);
  --field-focus:rgba(139,92,246,.55);
  --field-shadow:rgba(139,92,246,.12);
  --icon-color:#a78bfa;
  --icon-bg:   rgba(139,92,246,.08);
  --btn-bg:    linear-gradient(135deg,#7c3aed,#a855f7);
  --btn-color: #fff;
  --btn-shadow:rgba(124,58,237,.4);
  --key-bg:    rgba(15,10,35,.85);
  --key-border:rgba(139,92,246,.12);
  --key-color: #ede9fe;
  --key-hover: rgba(139,92,246,.18);
  --key-special-bg:rgba(124,58,237,.18);
  --key-special-color:#c4b5fd;
  --tag-color: #a78bfa;
  --tag-bg:    rgba(139,92,246,.1);
  --tag-border:rgba(139,92,246,.25);
  --hero-title:#f5f3ff;
  --hero-em:   #a855f7;
  --hero-body: rgba(196,181,253,.5);
  --link-color:rgba(196,181,253,.4);
  --hero-grid: rgba(139,92,246,.04);
  --label-color:#a78bfa;
  --body-class: dark;
}

[data-theme="d"]{
  --bg:        #050f0a;
  --hero-bg:   linear-gradient(160deg,#050f0a,#081a0f);
  --card-bg:   #081408;
  --card-border:rgba(34,197,94,.15);
  --panel-border:rgba(34,197,94,.1);
  --ink:       #f0fdf4;
  --ink-soft:  rgba(187,247,208,.55);
  --accent:    #22c55e;
  --accent-dim:rgba(34,197,94,.08);
  --accent-glow:rgba(34,197,94,.08);
  --teal:      #22c55e;
  --field-bg:  rgba(5,15,8,.7);
  --field-border:rgba(34,197,94,.18);
  --field-focus:rgba(34,197,94,.5);
  --field-shadow:rgba(34,197,94,.1);
  --icon-color:#4ade80;
  --icon-bg:   rgba(34,197,94,.06);
  --btn-bg:    linear-gradient(135deg,#16a34a,#22c55e);
  --btn-color: #052e16;
  --btn-shadow:rgba(22,163,74,.35);
  --key-bg:    rgba(5,15,8,.9);
  --key-border:rgba(34,197,94,.08);
  --key-color: #bbf7d0;
  --key-hover: rgba(34,197,94,.1);
  --key-special-bg:rgba(22,163,74,.12);
  --key-special-color:#4ade80;
  --tag-color: #4ade80;
  --tag-bg:    rgba(34,197,94,.08);
  --tag-border:rgba(34,197,94,.2);
  --hero-title:#f0fdf4;
  --hero-em:   #4ade80;
  --hero-body: rgba(187,247,208,.5);
  --link-color:rgba(187,247,208,.35);
  --hero-grid: rgba(34,197,94,.04);
  --label-color:#4ade80;
  --body-class: dark;
}