@import './variables.css';

/* Custom CSS untuk design system SMKN 1 Bondowoso */

/* Container */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 100%;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

/* Background Colors */
.bg-background {
    background-color: hsl(var(--background));
}

.bg-primary {
    background-color: hsl(var(--primary));
}

.bg-secondary {
    background-color: hsl(var(--secondary));
}

.bg-muted {
    background-color: hsl(var(--muted));
}

.bg-card {
    background-color: hsl(var(--card));
}

.bg-accent {
    background-color: hsl(var(--accent));
}

/* Text Colors */
.text-primary {
    color: hsl(var(--primary));
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.text-secondary {
    color: hsl(var(--secondary));
}

.text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
}

.text-foreground {
    color: hsl(var(--foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.text-card-foreground {
    color: hsl(var(--card-foreground));
}

.text-accent-foreground {
    color: hsl(var(--accent-foreground));
}

/* Border Colors */
.border-border {
    border-color: hsl(var(--border));
}

.border-primary {
    border-color: hsl(var(--primary));
}

.border-secondary {
    border-color: hsl(var(--secondary));
}

.border-input {
    border-color: hsl(var(--input));
}

/* Border Left Colors */
.border-l-primary {
    border-left-color: hsl(var(--primary));
}

.border-l-secondary {
    border-left-color: hsl(var(--secondary));
}

.border-l-muted {
    border-left-color: hsl(var(--muted));
}

.border-l-border {
    border-left-color: hsl(var(--border));
}

/* Gradient Utilities */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-background {
    --tw-gradient-from: hsl(var(--background));
    --tw-gradient-to: hsl(var(--background) / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-transparent {
    --tw-gradient-to: transparent;
}

/* Gradients Custom */
.bg-gradient-primary {
    background: var(--gradient-primary);
}

.bg-gradient-accent {
    background: var(--gradient-accent);
}

.bg-gradient-hero {
    background: var(--gradient-hero);
}

/* Background Opacity Utilities */
.bg-primary\/10 {
    background-color: hsl(var(--primary) / 0.1);
}

.bg-secondary\/10 {
    background-color: hsl(var(--secondary) / 0.1);
}

.bg-primary\/20 {
    background-color: hsl(var(--primary) / 0.2);
}

.bg-primary-foreground\/10 {
    background-color: hsl(var(--primary-foreground) / 0.1);
}

.bg-primary-foreground\/20 {
    background-color: hsl(var(--primary-foreground) / 0.2);
}

/* Border Opacity */
.border-primary\/10 {
    border-color: hsl(var(--primary) / 0.1);
}

.border-primary\/30 {
    border-color: hsl(var(--primary) / 0.3);
}

.border-secondary\/10 {
    border-color: hsl(var(--secondary) / 0.1);
}

.border-secondary\/30 {
    border-color: hsl(var(--secondary) / 0.3);
}

.border-primary-foreground\/30 {
    border-color: hsl(var(--primary-foreground) / 0.3);
}

/* Text Opacity */
.text-primary-foreground\/90 {
    color: hsl(var(--primary-foreground) / 0.9);
}

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Animations */
@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out;
}

/* Hover Effects */
.hover\:bg-primary:hover {
    background-color: hsl(var(--primary));
}

.hover\:bg-secondary:hover {
    background-color: hsl(var(--secondary));
}

.hover\:bg-secondary\/90:hover {
    background-color: hsl(var(--secondary) / 0.9);
}

.hover\:bg-primary-foreground\/20:hover {
    background-color: hsl(var(--primary-foreground) / 0.2);
}

.hover\:bg-accent:hover {
    background-color: hsl(var(--accent));
}

/* Transition Utilities */
.transition-colors {
    transition: color 0.3s ease, background-color 0.3s ease;
}

.transition-all {
    transition: all 0.3s ease;
}

.transition-transform {
    transition: transform 0.3s ease;
}

/* Custom Utilities */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Focus Utilities */
.ring-offset-background {
    --tw-ring-offset-color: hsl(var(--background));
}

.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: hsl(var(--primary));
}

.focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
}

/* Transform */
.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem);
}

.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

/* Group Hover Utilities */
.group:hover .group-hover\:bg-primary {
    background-color: hsl(var(--primary));
}

.group:hover .group-hover\:text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.group:hover .group-hover\:bg-secondary {
    background-color: hsl(var(--secondary));
}

.group:hover .group-hover\:text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
}

/* Hover effects untuk card */
.group:hover .group-hover\:shadow-lg {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.group:hover .group-hover\:-translate-y-1 {
    transform: translateY(-0.25rem);
}

/* Filter */
.blur-3xl {
    filter: blur(64px);
}

/* Additional Utilities */
.rounded-lg {
    border-radius: var(--radius);
}

.rounded-md {
    border-radius: calc(var(--radius) - 2px);
}

.rounded-full {
    border-radius: 9999px;
}

.border-l-4 {
    border-left-width: 4px;
}

.opacity-95 {
    opacity: 0.95;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-10 {
    opacity: 0.1;
}

.opacity-90 {
    opacity: 0.9;
}

/* Z-index */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    inset: 0;
}

.-bottom-4 {
    bottom: -1rem;
}

.-right-4 {
    right: -1rem;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.top-0 {
    top: 0;
}

.top-4 {
    top: 1rem;
}

.left-4 {
    left: 1rem;
}

.z-10 {
    z-index: 10;
}