:root {
    --primary-color: #00A47B;
    --primary-color-hover: #008362;
}

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

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

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

p {
    font-weight: 400;
    line-height: 1.6;
}

.cta-button-primary {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 14px 0 rgba(0, 164, 123, 0.39);
    transition: all 0.3s ease-in-out;
}
.cta-button-primary:hover {
    transform: scale(1.05);
    background-color: var(--primary-color-hover);
}

.cta-button-secondary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}
.cta-button-secondary:hover {
    background-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

.tutorial-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.tutorial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.tutorial-card .group-hover\:text-primary:hover {
    color: var(--primary-color);
}

.prose h2 {
    color: var(--primary-color);
    font-weight: 700;
}
.prose h3 {
     color: var(--primary-color);
     font-weight: 700;
}
.prose blockquote {
    border-left-color: var(--primary-color);
    background-color: #f7fafc;
}