:root {
    --terno: #1A2230;
    --camisa: #c8c2ca;
    --gravata: #9C6CCF;
    --flor-roxa-escura: #724c85;
    --flor-lilas-clara: #c3a6b4;
    --flor-branca: #f4EEf8;
    --folhagen-verde: #3c7a41;
}

/* Typography */
body {
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.title,
.subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
}

.title.is-1 {
    font-weight: 700;
}

.hero.is-primary {
    background: linear-gradient(135deg, var(--gravata) 0%, var(--flor-roxa-escura) 100%);
}

.section {
    padding: 3rem 1.5rem;
}

.timeline {
    border-left: 4px solid var(--gravata);
    padding-left: 2rem;
    margin-left: 1rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.5rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--gravata);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px var(--gravata);
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(156, 108, 207, 0.3);
}

.footer {
    background-color: var(--terno);
}

.navbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background-color: var(--flor-branca) !important;
}

.has-background-light {
    background-color: var(--flor-branca) !important;
}

.title.has-text-primary,
.has-text-primary {
    color: var(--flor-roxa-escura) !important;
}

.button.is-primary {
    background-color: var(--gravata);
    border-color: transparent;
}

.button.is-primary:hover {
    background-color: var(--flor-roxa-escura);
}

.icon.has-text-primary {
    color: var(--gravata) !important;
}

.navbar-item strong {
    color: var(--flor-roxa-escura) !important;
}

.box {
    background-color: #fff;
    border-left: 4px solid var(--flor-lilas-clara);
}

.button.is-white:hover {
    background-color: var(--flor-branca);
}

.navbar-item:hover {
    background-color: var(--flor-branca) !important;
    color: var(--flor-roxa-escura) !important;
}

/* Dark Mode Toggle Button */
#darkModeToggle {
    border: none;
    background: transparent;
    color: var(--flor-roxa-escura);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
}

#darkModeToggle:hover,
#darkModeToggle:focus {
    color: var(--gravata);
    background: transparent !important;
    transform: scale(1.1);
}

#darkModeToggle:active {
    transform: scale(0.95);
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: var(--terno);
    color: var(--flor-branca);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .navbar {
    background-color: #0f1419 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

body.dark-mode .navbar-item {
    color: var(--camisa);
}

body.dark-mode .navbar-item:hover {
    background-color: var(--terno) !important;
    color: var(--flor-branca) !important;
}

body.dark-mode .navbar-item strong {
    color: var(--flor-lilas-clara) !important;
}

body.dark-mode #darkModeToggle {
    color: var(--flor-lilas-clara);
}

body.dark-mode #darkModeToggle:hover {
    color: var(--flor-branca);
}

body.dark-mode .hero.is-primary {
    background: linear-gradient(135deg, var(--flor-roxa-escura) 0%, #4a2d5a 100%);
}

body.dark-mode .section {
    background-color: var(--terno);
}

body.dark-mode .has-background-light {
    background-color: #252e3d !important;
}

body.dark-mode .title,
body.dark-mode .subtitle {
    color: var(--flor-branca);
}

body.dark-mode .title.has-text-primary,
body.dark-mode .has-text-primary {
    color: var(--flor-lilas-clara) !important;
}

body.dark-mode .content {
    color: var(--camisa);
}

body.dark-mode .card {
    background-color: #252e3d;
    color: var(--camisa);
}

body.dark-mode .card:hover {
    box-shadow: 0 10px 30px rgba(156, 108, 207, 0.2);
}

body.dark-mode .box {
    background-color: #252e3d;
    color: var(--camisa);
    border-left: 4px solid var(--gravata);
}

body.dark-mode .timeline {
    border-left-color: var(--flor-lilas-clara);
}

body.dark-mode .timeline-item::before {
    background: var(--flor-lilas-clara);
    border-color: var(--terno);
    box-shadow: 0 0 0 3px var(--flor-lilas-clara);
}

body.dark-mode .button.is-primary {
    background-color: var(--flor-roxa-escura);
    color: var(--flor-branca);
}

body.dark-mode .button.is-primary:hover {
    background-color: var(--gravata);
}

body.dark-mode .button.is-white {
    background-color: var(--flor-branca);
    color: var(--flor-roxa-escura);
}

body.dark-mode .button.is-white:hover {
    background-color: var(--camisa);
}

body.dark-mode .input,
body.dark-mode .textarea,
body.dark-mode .select select {
    background-color: #1a2230;
    border-color: var(--flor-roxa-escura);
    color: var(--flor-branca);
}

body.dark-mode .input::placeholder,
body.dark-mode .textarea::placeholder {
    color: var(--camisa);
}

body.dark-mode .input:focus,
body.dark-mode .textarea:focus,
body.dark-mode .select select:focus {
    border-color: var(--gravata);
}

body.dark-mode .label {
    color: var(--flor-lilas-clara);
}

body.dark-mode .radio {
    color: var(--camisa);
}

body.dark-mode .has-text-grey {
    color: var(--camisa) !important;
}

body.dark-mode .footer {
    background-color: #0f1419;
}

body.dark-mode .icon.has-text-primary {
    color: var(--flor-lilas-clara) !important;
}

body.dark-mode .icon.has-text-danger {
    color: #ff6b9d;
}