83 lines
1.7 KiB
SCSS
83 lines
1.7 KiB
SCSS
|
:root {
|
||
|
|
/* Primary Colors */
|
||
|
|
--color-sage-green: #7A9B8E;
|
||
|
|
--color-warm-stone: #8B7E74;
|
||
|
|
|
||
|
|
/* Neutrals */
|
||
|
|
--color-soft-cream: #F5F3EF;
|
||
|
|
--color-light-gray: #E8E6E1;
|
||
|
|
--color-charcoal: #4A4A48;
|
||
|
|
--color-medium-gray: #878580;
|
||
|
|
|
||
|
|
/* Accent */
|
||
|
|
--color-terracotta: #C77E68;
|
||
|
|
|
||
|
|
/* Data Visualization */
|
||
|
|
--color-dusty-blue: #8A9BA8;
|
||
|
|
--color-muted-olive: #A8A070;
|
||
|
|
--color-soft-clay: #B89485;
|
||
|
|
|
||
|
|
/* Semantic Variables (optional - map to use cases) */
|
||
|
|
--color-primary: var(--color-sage-green);
|
||
|
|
--color-secondary: var(--color-warm-stone);
|
||
|
|
--color-accent: var(--color-terracotta);
|
||
|
|
--color-background: var(--color-soft-cream);
|
||
|
|
--color-surface: var(--color-light-gray);
|
||
|
|
--color-text-primary: var(--color-charcoal);
|
||
|
|
--color-text-secondary: var(--color-medium-gray);
|
||
|
|
|
||
|
|
/* Font Family */
|
||
|
|
--font-family: 'Jost', sans-serif;
|
||
|
|
--font-size: 16px;
|
||
|
|
|
||
|
|
/* Font Weights */
|
||
|
|
--font-weight-light: 300;
|
||
|
|
--font-weight-regular: 400;
|
||
|
|
--font-weight-bold: 700;
|
||
|
|
|
||
|
|
/* Font Sizes */
|
||
|
|
--font-size-small: 0.8rem;
|
||
|
|
--font-size-medium: 1rem;
|
||
|
|
--font-size-large: 1.2rem;
|
||
|
|
|
||
|
|
/* Line Heights */
|
||
|
|
--line-height-small: 1.2;
|
||
|
|
--line-height-medium: 1.4;
|
||
|
|
--line-height-large: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
a.btn {
|
||
|
|
display: flex;
|
||
|
|
gap: 3px;
|
||
|
|
align-items: center;
|
||
|
|
text-decoration: none;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
color: var(--color-soft-cream);
|
||
|
|
|
||
|
|
&-accent {
|
||
|
|
background: var(--color-accent);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: var(--color-secondary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-primary {
|
||
|
|
background: var(--color-primary);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: var(--color-secondary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-soft-clay {
|
||
|
|
background: var(--color-soft-clay);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: var(--color-secondary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|