:root {
    --background: 40 20% 98%;
    --foreground: 210 30% 15%;
    --card: 0 0% 100%;
    --card-foreground: 210 30% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 30% 15%;
    --primary: 178 55% 30%;
    --primary-foreground: 0 0% 100%;
    --secondary: 215 45% 22%;
    --secondary-foreground: 0 0% 100%;
    --muted: 40 15% 94%;
    --muted-foreground: 210 10% 45%;
    --accent: 0 72% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 40 15% 88%;
    --input: 40 15% 88%;
    --ring: 178 55% 30%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --turquoise: 178 55% 30%;
    --turquoise-light: 178 45% 45%;
    --turquoise-lighter: 178 35% 92%;
    --deep-blue: 215 45% 22%;
    --deep-blue-light: 215 35% 35%;
    --ottoman-red: 0 72% 50%;
    --ottoman-red-light: 0 60% 60%;
    --gold: 40 70% 50%;
    --gold-light: 40 55% 70%;
    --warm-white: 40 20% 98%;
    --warm-gray: 40 10% 92%;
}

.dark {
    --background: 215 40% 8%;
    --foreground: 40 15% 92%;
    --card: 215 35% 12%;
    --card-foreground: 40 15% 92%;
    --popover: 215 35% 12%;
    --popover-foreground: 40 15% 92%;
    --primary: 178 50% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 215 35% 30%;
    --secondary-foreground: 40 15% 92%;
    --muted: 215 30% 18%;
    --muted-foreground: 40 10% 60%;
    --accent: 0 65% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 215 25% 20%;
    --input: 215 25% 20%;
    --ring: 178 50% 40%;
}

* {
    border-color: hsl(var(--border));
}


body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "San Francisco", "Roboto", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "San Francisco", "Roboto", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
    font-weight: 600;
}

    h1:focus,
    h1:focus-visible {
        outline: none;
    }

input[type="time"] {
    accent-color: hsl(0 72% 50%);
}

    input[type="time"]::-webkit-datetime-edit-hour-field:focus,
    input[type="time"]::-webkit-datetime-edit-minute-field:focus,
    input[type="time"]::-webkit-datetime-edit-ampm-field:focus {
        background-color: hsl(0 72% 50%);
        color: white;
        border-radius: 2px;
    }

.ornament-divider {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='20' viewBox='0 0 60 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 C25 5, 20 10, 15 10 C10 10, 5 5, 0 0 M30 0 C35 5, 40 10, 45 10 C50 10, 55 5, 60 0' fill='none' stroke='%23267a7a' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    height: 20px;
}

.hero-overlay {
    background: linear-gradient(135deg, hsl(215 45% 22% / 0.85) 0%, hsl(178 55% 30% / 0.75) 100%);
}

.tulip-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10 C35 20, 25 25, 25 35 C25 45, 35 50, 40 55 C45 50, 55 45, 55 35 C55 25, 45 20, 40 10Z' fill='none' stroke='white' stroke-width='0.5' opacity='0.08'/%3E%3Cpath d='M40 55 L40 70' stroke='white' stroke-width='0.5' opacity='0.08'/%3E%3Cpath d='M35 65 C37 62, 40 60, 40 60 C40 60, 43 62, 45 65' fill='none' stroke='white' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.section-ornament {
    background-image: url("data:image/svg+xml,%3Csvg width='280' height='36' viewBox='0 0 280 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23267a7a'%3E%3Cpath d='M20 18 Q45 6, 70 14 Q85 18, 100 14 Q110 11, 120 14' stroke-width='1.2' opacity='0.35'/%3E%3Cpath d='M30 16 C28 12, 32 8, 36 12 C38 14, 34 18, 30 16Z' stroke-width='0.8' fill='%23267a7a' fill-opacity='0.08' opacity='0.4'/%3E%3Cpath d='M60 14 C56 10, 62 7, 65 11 C67 14, 62 16, 60 14Z' stroke-width='0.7' opacity='0.3'/%3E%3Cpath d='M85 16 C83 13, 87 11, 89 14' stroke-width='0.7' opacity='0.25'/%3E%3Ccircle cx='140' cy='16' r='4' stroke-width='1.2' opacity='0.35' fill='%23267a7a' fill-opacity='0.1'/%3E%3Ccircle cx='140' cy='16' r='1.5' fill='%23267a7a' fill-opacity='0.3'/%3E%3Cpath d='M134 14 C132 10, 136 6, 140 9 C144 6, 148 10, 146 14' stroke-width='0.8' opacity='0.25' fill='%23267a7a' fill-opacity='0.05'/%3E%3Cpath d='M160 14 Q170 11, 180 14 Q195 18, 210 14 Q235 6, 260 18' stroke-width='1.2' opacity='0.35'/%3E%3Cpath d='M250 16 C252 12, 248 8, 244 12 C242 14, 246 18, 250 16Z' stroke-width='0.8' fill='%23267a7a' fill-opacity='0.08' opacity='0.4'/%3E%3Cpath d='M220 14 C224 10, 218 7, 215 11 C213 14, 218 16, 220 14Z' stroke-width='0.7' opacity='0.3'/%3E%3Cpath d='M195 16 C197 13, 193 11, 191 14' stroke-width='0.7' opacity='0.25'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    width: 280px;
    height: 36px;
}

#root {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}

    .logo:hover {
        filter: drop-shadow(0 0 2em #646cffaa);
    }

    .logo.react:hover {
        filter: drop-shadow(0 0 2em #61dafbaa);
    }

@keyframes logo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: no-preference) {
    a:nth-of-type(2) .logo {
        animation: logo-spin infinite 20s linear;
    }
}

.card {
    padding: 2em;
}

.read-the-docs {
    color: #888;
}

button {
    cursor: pointer !important;
}