/* ============================================
   Second Color System
   Base color: rgb(152, 140, 129) — #988c81
   To change the second color, modify the RGB values below.
   ============================================ */

:root {
    --second-r: 139;
    --second-g: 72;
    --second-b: 81;
}

/* ---- Backgrounds ---- */
.bg-second-50  { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.bg-second-100 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.bg-second-200 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.bg-second-300 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.bg-second-400 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.bg-second-500 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.bg-second-600 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.bg-second-700 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.bg-second-800 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.bg-second-900 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Text ---- */
.text-second-50  { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.text-second-100 { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.text-second-200 { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.text-second-300 { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.text-second-400 { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.text-second-500 { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.text-second-600 { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.text-second-700 { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.text-second-800 { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.text-second-900 { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Borders ---- */
.border-second-50  { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.border-second-100 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.border-second-200 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.border-second-300 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.border-second-400 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.border-second-500 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.border-second-600 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.border-second-700 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.border-second-800 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.border-second-900 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Hover Backgrounds ---- */
.hover\:bg-second-50:hover  { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.hover\:bg-second-100:hover { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.hover\:bg-second-200:hover { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.hover\:bg-second-300:hover { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.hover\:bg-second-400:hover { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.hover\:bg-second-500:hover { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.hover\:bg-second-600:hover { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.hover\:bg-second-700:hover { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.hover\:bg-second-800:hover { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.hover\:bg-second-900:hover { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Hover Text ---- */
.hover\:text-second-50:hover  { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.hover\:text-second-100:hover { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.hover\:text-second-200:hover { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.hover\:text-second-300:hover { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.hover\:text-second-400:hover { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.hover\:text-second-500:hover { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.hover\:text-second-600:hover { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.hover\:text-second-700:hover { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.hover\:text-second-800:hover { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.hover\:text-second-900:hover { color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Hover Borders ---- */
.hover\:border-second-50:hover  { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.hover\:border-second-100:hover { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.hover\:border-second-200:hover { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.hover\:border-second-300:hover { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.hover\:border-second-400:hover { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.hover\:border-second-500:hover { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.hover\:border-second-600:hover { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.hover\:border-second-700:hover { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.hover\:border-second-800:hover { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.hover\:border-second-900:hover { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Focus Ring ---- */
.focus\:ring-second-50:focus  { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.focus\:ring-second-100:focus { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.focus\:ring-second-200:focus { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.focus\:ring-second-300:focus { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.focus\:ring-second-400:focus { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.focus\:ring-second-500:focus { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.focus\:ring-second-600:focus { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.focus\:ring-second-700:focus { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.focus\:ring-second-800:focus { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.focus\:ring-second-900:focus { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Focus Border ---- */
.focus\:border-second-50:focus  { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.focus\:border-second-100:focus { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.focus\:border-second-200:focus { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.focus\:border-second-300:focus { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.focus\:border-second-400:focus { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.focus\:border-second-500:focus { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.focus\:border-second-600:focus { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.focus\:border-second-700:focus { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.focus\:border-second-800:focus { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.focus\:border-second-900:focus { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Ring (non-focus) ---- */
.ring-second-50  { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.ring-second-100 { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.ring-second-200 { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.ring-second-300 { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.ring-second-400 { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.ring-second-500 { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.ring-second-600 { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.ring-second-700 { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.ring-second-800 { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.ring-second-900 { --tw-ring-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Gradient From ---- */
.from-second-50  { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.from-second-100 { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.from-second-200 { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.from-second-300 { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.from-second-400 { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.from-second-500 { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.from-second-600 { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.from-second-700 { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.from-second-800 { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.from-second-900 { --tw-gradient-from: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Gradient To ---- */
.to-second-50  { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.05); }
.to-second-100 { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.1); }
.to-second-200 { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }
.to-second-300 { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }
.to-second-400 { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.4); }
.to-second-500 { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.5); }
.to-second-600 { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.6); }
.to-second-700 { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.7); }
.to-second-800 { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.8); }
.to-second-900 { --tw-gradient-to: rgba(var(--second-r), var(--second-g), var(--second-b), 0.9); }

/* ---- Group Hover Border ---- */
.group:hover .group-hover\:border-second-300 { border-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.3); }

/* ---- Group Hover Background ---- */
.group:hover .group-hover\:bg-second-200 { background-color: rgba(var(--second-r), var(--second-g), var(--second-b), 0.2); }