/* ==========================================================================
   Emerald Forge Design System - Vintage Coding LLC
   ========================================================================== */

:root {
    /* Color Palette */
    --brand-primary: #006948;
    --brand-primary-hover: #005137;
    --brand-primary-container: #00855d;
    --brand-surface-light: #F8FAFC;
    --brand-surface-card: #FFFFFF;
    --brand-secondary: #496271;
    --brand-secondary-dark: #2E4756;
    --brand-ink-dark: #0F172A;
    --brand-ink-muted: #475569;
    --brand-emerald-tint: #ECFDF5;
    --brand-border: #E2E8F0;
    --brand-border-emerald: #A7F3D0;

    /* Spacing & Layout */
    --container-max: 1280px;
    --section-padding-y: 5rem;
    --radius-sm: 0.25rem;
    --radius-default: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Shadows & Elevation */
    --shadow-level-1: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-level-2: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
}

/* Typography Overrides */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--brand-ink-dark);
    background-color: #FFFFFF;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    color: var(--brand-ink-dark);
    letter-spacing: -0.02em;
}

.display-hero {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

@media (max-width: 768px) {
    .display-hero {
        font-size: 2.25rem;
    }
}

/* Navbar */
.navbar-emerald {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--brand-border);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-brand-title {
    font-family: 'Public Sans', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--brand-ink-dark);
}

.navbar-brand-title span {
    color: var(--brand-primary);
}

/* Buttons */
.btn-emerald {
    background-color: var(--brand-primary);
    color: #FFFFFF;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-default);
    border: none;
    transition: all 0.2s ease-in-out;
}

.btn-emerald:hover, .btn-emerald:focus {
    background-color: var(--brand-primary-hover);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 105, 72, 0.25);
}

.btn-outline-emerald {
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-default);
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}

.btn-outline-emerald:hover {
    background-color: var(--brand-emerald-tint);
    color: var(--brand-primary);
}

/* Cards & Elevation */
.card-emerald {
    background-color: var(--brand-surface-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-level-1);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-emerald:hover {
    box-shadow: var(--shadow-level-2);
    border-color: var(--brand-border-emerald);
    transform: translateY(-2px);
}

/* Form Inputs */
.form-control-emerald {
    background-color: var(--brand-surface-light);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-default);
    padding: 0.75rem 1rem;
    color: var(--brand-ink-dark);
}

.form-control-emerald:focus {
    background-color: #FFFFFF;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 105, 72, 0.15);
}

/* Chips & Badges */
.badge-emerald {
    background-color: var(--brand-emerald-tint);
    color: var(--brand-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid var(--brand-border-emerald);
}

.badge-slate {
    background-color: #F1F5F9;
    color: var(--brand-secondary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
}

/* Section Background Wrappers */
.section-light {
    background-color: var(--brand-surface-light);
    border-top: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
}

.section-padding {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

/* Icon Squircles */
.icon-squircle {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--brand-emerald-tint);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}