@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --color-khaki: #9a9574;
    --color-olive: #b2ac88;
    --color-sage-light: #c7d7c1;
    --color-pink: #eec7ce;
    --color-gold: #d7b77a;
    --color-black: #1a1a1a;
    --color-lavender: #c9c4d9;
    --color-sage-dark: #8faf99;
    --color-off-white: #faf8f4;
}

/* Seasonal Overrides */
[data-season="valentine"] {
    --color-khaki: #b86b77;
    /* Rosewood */
    --color-olive: #d48c9a;
    /* Dusty Rose */
    --color-sage-light: #f4dce0;
    /* Very Light Pink */
    --color-pink: #eec7ce;
    /* Original Pink */
    --color-sage-dark: #a64d5d;
    /* Dark Rose */
    --color-lavender: #d6b4d3;
    /* Soft Lavender */
}

[data-season="motherDay"] {
    --color-khaki: #8a7ea3;
    /* Deep Lavender */
    --color-olive: #a59cc0;
    /* Muted Lavender */
    --color-sage-light: #e0dced;
    /* Pale Lavender */
    --color-pink: #f2e1e4;
    /* Softest Blush */
    --color-sage-dark: #6e608a;
    /* Dark Lavender */
    --color-lavender: #c9c4d9;
    /* Original Lavender */
}

[data-season="summer"] {
    --color-khaki: #c4a484;
    /* Light Brown/Sand */
    --color-olive: #d4b483;
    /* Tan */
    --color-sage-light: #f2e6ce;
    /* Creamy Yellow */
    --color-gold: #d7b77a;
    /* Original Gold */
    --color-sage-dark: #b8860b;
    /* Dark Goldenroad */
    --color-pink: #f4a460;
    /* Sandy Brown */
}

[data-season="halloween"] {
    --color-khaki: #4a4a4a;
    /* Dark Grey */
    --color-olive: #b25d2b;
    /* Pumpkin Orange */
    --color-sage-light: #e9ecef;
    /* Light Grey */
    --color-gold: #cf711f;
    /* Burnt Orange */
    --color-sage-dark: #1a1a1a;
    /* Black */
    --color-lavender: #6a5acd;
    /* Slate Blue */
}

[data-season="christmas"] {
    --color-khaki: #1b4d3e;
    /* Forest Green */
    --color-olive: #2e8b57;
    /* Sea Green */
    --color-sage-dark: #163e33;
    /* Dark Forest Green */
    --color-gold: #ffd700;
    /* Bright Gold */
    --color-pink: #c41e3a;
    /* Cardinal Red */
    --color-lavender: #fff5ee;
    /* Seashell white */
}

@font-face {
  font-family: 'cuomotype-regular';
  src: url('fonts/Cuomotype Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'true-typewriter-polyglott';
  src: url('fonts/TypeWriter Normal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Cuomotype Regular';
  src: url('fonts/Cuomotype Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TrueTypewriterPolyglott';
  src: url('fonts/TypeWriter Normal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    font-family: 'true-typewriter-polyglott', 'Courier Prime', 'Lato', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-serif {
    font-family: 'cuomotype-regular', 'Playfair Display', serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #7C9082;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5A6B5F;
}

/* Utilities */
.text-sage {
    color: var(--color-sage-dark);
}

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

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

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

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

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

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

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

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

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

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

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

.text-sage-light {
    color: var(--color-sage-light);
}

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

.text-off-white {
    color: var(--color-off-white);
}

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

/* Main Menu */
.bg-menu {
    background-color: var(--color-khaki);
}

.font-typewriter {
    font-family: 'Courier Prime', monospace;
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#typewriter-text::after {
    content: '|';
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Footer Social Styles */
.footer-social {
    background-color: var(--color-lavender);
}

.social-icon {
    color: var(--color-sage-dark);
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Announcement Bar */
.bg-sage {
    background-color: var(--color-sage-dark);
}

#announcement-messages {
    will-change: transform;
}

@keyframes float-icon {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(15deg);
    }
}

/*slider bar vertical*/
.modal-content {
    background: #fff;
    width: 400px;
    max-height: 95%;
    /* límite de altura */
    overflow-y: auto;
    /* activa la barra vertical */
    padding: 20px;
    border-radius: 8px;
}

.form-scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
}