/*
  PicaMail Complete Rebrand
  ========================
  Brand Colors:
    Yellow  #FFDE42  - highlights, badges, warnings
    Cyan    #53CBF3  - secondary, info
    Blue    #5478FF  - primary buttons, active states
    Navy    #111FA2  - nav, headings, dark UI

  Contrast Ratios:
    Navy on white = 9.8:1 (AAA)
    Navy on grey #F5F7FA = 9.4:1 (AAA)
    White on Blue = 3.7:1 (AA large/bold - buttons)
    White on Navy = 9.8:1 (AAA)
    Black on Yellow = 15.4:1 (AAA)
    Navy on Yellow = 6.5:1 (AAA)
    #1F2933 on Cyan = 5.9:1 (AA)
*/

/* 1. NAV / SIDEBAR - Navy bg, white text */
.bg-indigo-900{background-color:#111FA2!important}
.bg-indigo-800{background-color:#1620b8!important}
.bg-indigo-950{background-color:#0b1470!important}
.hover\:bg-indigo-800:hover{background-color:#1c2ac5!important}
.hover\:bg-indigo-700:hover{background-color:#2535d0!important}
.text-indigo-100{color:#dde3ff!important}
.text-indigo-50{color:#eef1ff!important}

/* 2. PRIMARY BUTTONS - Blue bg, white text */
.bg-cyan-400{background-color:#5478FF!important;color:#FFF!important}
.bg-cyan-500{background-color:#5478FF!important;color:#FFF!important}
.bg-cyan-600{background-color:#4568eb!important;color:#FFF!important}
.hover\:bg-cyan-500:hover{background-color:#4568eb!important;color:#FFF!important}
.hover\:bg-cyan-600:hover{background-color:#3a5cd6!important;color:#FFF!important}
.hover\:bg-cyan-700:hover{background-color:#3050c2!important;color:#FFF!important}
button[type=submit]{background-color:#5478FF!important;color:#FFF!important;font-weight:600!important}
button[type=submit]:hover{background-color:#3a5cd6!important}

/* 3. SECONDARY BUTTONS */
.bg-indigo-500{background-color:#5478FF!important}
.bg-indigo-600{background-color:#4568eb!important}
.bg-indigo-700{background-color:#3050c2!important}
.hover\:bg-indigo-500:hover{background-color:#4568eb!important}
.hover\:bg-indigo-600:hover{background-color:#3a5cd6!important}

/* 4. TEXT - High contrast */
.text-indigo-900{color:#111FA2!important}
.text-indigo-800{color:#1620b8!important}
.text-indigo-700{color:#2030c0!important}
.text-indigo-600{color:#3045d0!important}
.text-indigo-500{color:#5478FF!important}
.text-indigo-400{color:#6b8aff!important}
.text-indigo-300{color:#8da6ff!important}
.text-indigo-200{color:#b0c2ff!important}
.text-grey-900{color:#1F2933!important}
.text-grey-800{color:#323F4B!important}
.text-grey-700{color:#3E4C59!important}
.text-grey-600{color:#52606D!important}
.text-grey-500{color:#52606D!important}
.text-grey-400{color:#616E7C!important}
h1,h2,h3,h4,h5,h6{color:#111FA2!important}
.dark h1,.dark h2,.dark h3,.dark h4{color:#FFF!important}

/* 5. LINKS */
.text-cyan-600{color:#111FA2!important}
.text-cyan-700{color:#0b1470!important}
.hover\:text-cyan-700:hover{color:#5478FF!important}
.hover\:text-cyan-800:hover{color:#111FA2!important}
a.text-indigo-600{color:#111FA2!important}
a.text-indigo-700{color:#0b1470!important}
.hover\:text-indigo-800:hover{color:#5478FF!important}

/* 6. BADGES */
.bg-yellow-100{background-color:#FFF8D6!important;color:#000!important}
.bg-yellow-200{background-color:#FFEE8A!important;color:#000!important}
.bg-yellow-300{background-color:#FFDE42!important;color:#000!important}
.bg-yellow-400{background-color:#FFDE42!important;color:#000!important}
.text-yellow-800{color:#000!important}
.bg-cyan-50{background-color:#E8F8FD!important;color:#111FA2!important}
.bg-cyan-100{background-color:#D0F1FB!important;color:#111FA2!important}
.bg-cyan-200{background-color:#A1E3F7!important;color:#0b1470!important}
.bg-cyan-300{background-color:#53CBF3!important;color:#0b1470!important}
.text-cyan-800{color:#0b1470!important}
.text-cyan-900{color:#111FA2!important}
.bg-green-100{background-color:#C1F2C7!important;color:#014807!important}
.bg-green-400{background-color:#31B237!important;color:#FFF!important}
.bg-green-500{background-color:#18981D!important;color:#FFF!important}
.bg-red-100{background-color:#FFE3E3!important;color:#610316!important}
.bg-red-400{background-color:#EF4E4E!important;color:#FFF!important}
.bg-red-500{background-color:#E12D39!important;color:#FFF!important}

/* 7. TOGGLES */
[role=switch].bg-cyan-400,[role=switch].bg-cyan-500{background-color:#5478FF!important}
[role=switch].bg-grey-300{background-color:#CBD2D9!important}

/* 8. FORM INPUTS */
input:focus,select:focus,textarea:focus,
[type=text]:focus,[type=email]:focus,[type=password]:focus,
[type=search]:focus,[type=url]:focus{
  border-color:#5478FF!important;
  --tw-ring-color:rgba(84,120,255,0.3)!important;
  box-shadow:0 0 0 3px rgba(84,120,255,0.3)!important;
  outline:none!important
}

/* 9. FOCUS RINGS */
.ring-indigo-200{--tw-ring-color:rgba(84,120,255,0.3)!important}
.ring-indigo-300{--tw-ring-color:rgba(84,120,255,0.4)!important}
.focus\:ring-indigo-100:focus{--tw-ring-color:rgba(84,120,255,0.2)!important}
.focus\:ring-cyan-200:focus{--tw-ring-color:rgba(83,203,243,0.3)!important}

/* 10. BORDERS */
.border-indigo-200{border-color:#c7d2fe!important}
.border-indigo-300{border-color:#a5b4fc!important}
.border-indigo-500{border-color:#5478FF!important}
.border-indigo-700{border-color:#2030c0!important}
.border-indigo-900{border-color:#111FA2!important}
.border-cyan-300{border-color:#53CBF3!important}
.border-cyan-400{border-color:#53CBF3!important}
.border-cyan-500{border-color:#3abce6!important}

/* 11. GRADIENTS */
.from-indigo-900{--tw-gradient-from:#111FA2!important}
.to-indigo-800{--tw-gradient-to:#1620b8!important}
.from-cyan-400{--tw-gradient-from:#53CBF3!important}
.to-cyan-600{--tw-gradient-to:#29a8d4!important}

/* 12. TABLE HOVER */
tr:hover td,.hover\:bg-grey-50:hover{background-color:#f0f2ff!important}
.bg-indigo-50{background-color:#eef1ff!important}
.bg-indigo-100{background-color:#dde3ff!important}
.bg-indigo-200{background-color:#c0cdff!important}
.bg-indigo-300{background-color:#8da6ff!important}
.bg-indigo-400{background-color:#6b8aff!important}

/* 13. AUTH PAGE */
body.bg-grey-50{background-color:#F5F7FA!important}

/* 14. DARK MODE */
.dark .bg-indigo-900{background-color:#0b1470!important}
.dark .bg-indigo-800{background-color:#111FA2!important}
.dark .bg-grey-900{background-color:#121827!important}
.dark .bg-grey-800{background-color:#1e2a3a!important}
.dark .text-indigo-100{color:#dde3ff!important}
.dark .text-indigo-200{color:#b0c2ff!important}
.dark .text-grey-100{color:#E4E7EB!important}
.dark .text-grey-200{color:#CBD2D9!important}
.dark button[type=submit]{background-color:#5478FF!important;color:#FFF!important}

/* 15. MISC */
::selection{background:rgba(84,120,255,0.2);color:#111FA2}
.dark ::selection{background:rgba(84,120,255,0.3);color:#FFF}
.ghost{background:#D0F1FB!important}
hr.border-indigo-900{border-color:#5478FF!important}
::-webkit-scrollbar-thumb{background:rgba(84,120,255,0.3)!important}
::-webkit-scrollbar-thumb:hover{background:rgba(84,120,255,0.5)!important}