:root {
    --background: #ffffff;
    --foreground: #1e3a5f; /* warna foreground diganti ke navy biru */
    --card: #ffffff;
    --card-foreground: #1e3a5f;
    --primary: #3dc9b0; /* tosca muda */
    --primary-foreground: #f8fafc;
    --secondary: #e6f2f1; /* warna secondary soft biru muda */
    --secondary-foreground: #1e3a5f;
    --muted: #e6f2f1;
    --muted-foreground: #4a6572;
    --accent: #e6f2f1;
    --accent-foreground: #1e3a5f;
    --destructive: #ef4444; /* merah untuk error tetap */
    --destructive-foreground: #f8fafc;
    --border: #a3d2ca; /* border tosca muda */
    --input: #a3d2ca;
    --ring: #3dc9b0;
    --radius: 0.5rem;
}

body {
    background: linear-gradient(to bottom, var(--background), #d7f0ec);
    color: var(--foreground);
}

.card {
    border: 1px solid rgba(61, 201, 176, 0.3); /* warna border tosca semi transparan */
    box-shadow: 0 4px 20px rgba(61, 201, 176, 0.15);
}

.card-header, .card-footer {
    background: rgba(61, 201, 176, 0.1);
    border-color: rgba(61, 201, 176, 0.3);
}

h1 {
    background: linear-gradient(to right, #3dc9b0, #63e6be);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-icon {
    background: rgba(61, 201, 176, 0.15);
}

.feature-icon svg {
    color: var(--primary);
}

.btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
}

.btn-primary:hover:not(:disabled) {
    background: #32b19e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(61, 201, 176, 0.3);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(61, 201, 176, 0.3);
}

.btn-outline {
    border: 1px solid var(--border);
    color: var(--foreground);
}

.btn-outline:hover:not(:disabled) {
    background: var(--accent);
}

.how-it-works {
    background: rgba(61, 201, 176, 0.1);
    border-color: rgba(61, 201, 176, 0.3);
}

.toast-success {
    border-left: 4px solid #3dc9b0;
}

.toast-success .toast-icon {
    color: #3dc9b0;
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(61, 201, 176, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(61, 201, 176, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 201, 176, 0); }
}

/* jangan lupa bagian shimmer untuk btn-download */
.btn-download::after {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}