body {

font-family: var(--font-family-sans);
background: var(--color-bg);
color: var(--color-text-primary);

margin: 0;

}

.navbar {

display: flex;
justify-content: space-between;
padding: var(--space-4) var(--space-6);

background: var(--color-surface);
box-shadow: var(--shadow-sm);

}

.logo {

font-family: var(--font-family-serif);
font-size: var(--font-size-2xl);

}

.hero {

text-align: center;
padding: var(--space-8);

}

.hero h2 {

font-family: var(--font-family-serif);
font-size: var(--font-size-4xl);

}


.palette {

padding: var(--space-7);

}

.color-grid {

display: flex;
gap: var(--space-6);

}

.color-card {

padding: var(--space-6);
border-radius: var(--radius-lg);
color: white;
width: 220px;

}

.sage {

background: var(--color-sage);

}

.pink {

background: var(--color-pink);

}

.cream {

background: var(--color-cream);
color: black;

}


.states {

padding: var(--space-7);

}

.state-grid {

display: flex;
gap: var(--space-4);

}

.badge {

padding: 10px 18px;
border-radius: var(--radius-full);
font-weight: 500;

}

.success {

background: var(--color-success);

}

.warning {

background: var(--color-warning);

}

.error {

background: var(--color-error);

}

.neutral {

background: var(--color-neutral);
color: white;

}



.ui-showcase {

padding: var(--space-7);
text-align: center;

}

.ui-image {

width: 85%;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);

}



.components {

padding: var(--space-7);

}

.card-grid {

display: flex;
gap: var(--space-6);

}

.card {

background: var(--color-surface);
padding: var(--space-6);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);

width: 280px;

}

button {

border: none;
padding: 10px 18px;
border-radius: var(--radius-md);
cursor: pointer;

margin-top: 10px;

}

.primary {

background: var(--color-primary);
color: white;

}

.secondary {

background: var(--color-secondary);
color: white;

}

.accent {

background: var(--color-accent);

}


footer {

text-align: center;
padding: var(--space-5);
margin-top: var(--space-8);

}