:root {
    --background: 228 33% 97%;
    --foreground: 221 39% 11%;

    --card: 0 0% 100%;
    --card-foreground: 221 39% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 221 39% 11%;

    --primary: 218 70% 12%;
    --primary-foreground: 0 0% 100%;

    --primary-hover: 218 70% 20%;
    --primary-light: 218 63% 27%;

    --secondary: 220 14% 96%;
    --secondary-foreground: 221 39% 11%;

    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 46%;

    --accent: 348 83% 42%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 348 79% 51%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 348 83% 42%;

    --radius: 0.875rem;

    --text-primary: 221 39% 11%;
    --text-secondary: 218 17% 28%;
    --text-muted: 220 9% 46%;

    --surface-soft: 220 14% 96%;
}

.dark {
    --background: 218 70% 12%;
    --foreground: 0 0% 100%;

    --card: 218 70% 16%;
    --card-foreground: 0 0% 100%;

    --popover: 218 70% 16%;
    --popover-foreground: 0 0% 100%;

    --primary: 0 0% 100%;
    --primary-foreground: 218 70% 12%;

    --secondary: 218 70% 20%;
    --secondary-foreground: 0 0% 100%;

    --muted: 218 70% 20%;
    --muted-foreground: 220 13% 70%;

    --accent: 348 83% 42%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 218 70% 25%;
    --input: 218 70% 25%;
    --ring: 348 83% 42%;
}

/* Gradient Utilities */
.gradient-navy {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
}

/* Custom Utilities */
.container-narrow {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    max-width: 1200px; /* Approximate container size */
}
@media (min-width: 1400px) {
    .container-narrow {
        max-width: 1200px;
    }
}

.section-padding {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
@media (min-width: 768px) {
    .section-padding {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}