.custom-hover {
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

    .custom-hover:hover {
        background-color: #7a5f5e; /*  */
        border-color: #ffffff; /* keeps border white */
        transform: scale(1.05); /* gentle enlargement */
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* subtle glow */
    }

/* Design System (from Tailwind CSS conversion) */
:root {
    --background: 0 0% 100%;
    --foreground: 207 93% 23%;
    --card: 0 0% 100%;
    --card-foreground: 207 93% 23%;
    --popover: 0 0% 100%;
    --popover-foreground: 207 93% 23%;
    --primary: 198 71% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 27 70% 58%;
    --secondary-foreground: 0 0% 100%;
    --muted: 210 40% 96%;
    --muted-foreground: 207 50% 45%;
    --accent: 39 66% 69%;
    --accent-foreground: 207 93% 23%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 198 71% 40%;
    --radius: 0.75rem;
    /* Custom design tokens */
    --navy: 207 93% 23%;
    --teal: 198 71% 40%;
    --orange: 27 70% 58%;
    --tan: 39 66% 69%;
    --gradient-primary: linear-gradient(135deg, hsl(198 71% 40%) 0%, hsl(207 93% 23%) 100%);
    --gradient-warm: linear-gradient(135deg, hsl(27 70% 58%) 0%, hsl(39 66% 69%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(198 71% 50%) 0%, hsl(207 93% 28%) 100%);
    --shadow-soft: 0 4px 20px -2px hsl(207 93% 23% / 0.1);
    --shadow-strong: 0 10px 40px -4px hsl(207 93% 23% / 0.2);
}

.dark {
    --background: 207 93% 8%;
    --foreground: 0 0% 98%;
    --card: 207 93% 12%;
    --card-foreground: 0 0% 98%;
    --popover: 207 93% 12%;
    --popover-foreground: 0 0% 98%;
    --primary: 198 71% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 27 70% 58%;
    --secondary-foreground: 0 0% 100%;
    --muted: 207 50% 20%;
    --muted-foreground: 210 40% 70%;
    --accent: 39 66% 69%;
    --accent-foreground: 207 93% 23%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 207 50% 20%;
    --input: 207 50% 20%;
    --ring: 198 71% 50%;
}

/* Utility classes (from Tailwind CSS) */
.bg-gradient-hero {
    background: var(--gradient-hero);
}

.text-white {
    color: #fff;
}

.p-8 {
    padding: 2rem;
}

.rounded-lg {
    border-radius: var(--radius);
}

.shadow-soft {
    box-shadow: var(--shadow-soft);
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
}

.font-bold {
    font-weight: 700;
}

.mt-4 {
    margin-top: 1rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

/* Base body style */
body {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: system-ui, sans-serif;
    margin: 0;
}

/* App.css conversion */
#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;
}