[data-skin="green"] {
    --color-primary: #16a34a; /* Tailwind green-600 */
    --color-primary-hover: #15803d; /* green-700 */
    --color-primary-light: #4ade80; /* green-400 */
    --color-primary-dark: #166534; /* green-800 */

    --color-accent: #16a34a;
    --color-focus-ring: rgba(22, 163, 74, 0.4);
}

[data-skin="green"] .bg-primary {
    background-color: var(--color-primary) !important;
}

.from-green-900 {
    --tw-gradient-from: #003438 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 52 56 / 0) var(--tw-gradient-to-position); /* transparan */
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-green-800 {
    --tw-gradient-to: #04a3ac var(--tw-gradient-to-position);
}

.bg-green-to-r {
    background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.shadow-green-800 {
    --tw-shadow-color: #003438;
}

.group.active .group-\[\.active\]\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.group\/item.active .group-\[\.active\]\/item\:bg-green-500, .group.active .group-\[\.active\]\:bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(0 52 56 / var(--tw-bg-opacity));
}