90 lines
1.8 KiB
CSS
90 lines
1.8 KiB
CSS
:root {
|
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
|
|
color-scheme: light dark;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
background-color: #6D6875;
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
/* Primary Colors */
|
|
--color-primary: #FFCDB2;
|
|
--color-primary-dark: #FFB4A2;
|
|
--color-secondary: #E5989B;
|
|
--color-secondary-dark: #B5838D;
|
|
--color-dark: #6D6875;
|
|
|
|
/* Background Colors */
|
|
--color-bg-dark: #6D6875;
|
|
--color-bg-light: #FFCDB2;
|
|
--color-bg-card: white;
|
|
|
|
/* Text Colors */
|
|
--color-text-primary: #6D6875;
|
|
--color-text-primary-light: rgba(255, 255, 255, 0.87);
|
|
--color-text-secondary: #B5838D;
|
|
--color-text-accent: #E5989B;
|
|
|
|
/* Interactive Colors */
|
|
--color-focus: rgba(255, 205, 178, 0.3);
|
|
--color-shadow-primary: rgba(255, 205, 178, 0.3);
|
|
--color-shadow-secondary: rgba(229, 152, 155, 0.3);
|
|
}
|
|
|
|
a {
|
|
font-weight: 500;
|
|
color: var(--color-primary);
|
|
text-decoration: inherit;
|
|
}
|
|
a:hover {
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.2em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
button {
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
padding: 0.6em 1.2em;
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
background-color: var(--color-bg-dark);
|
|
cursor: pointer;
|
|
transition: border-color 0.25s;
|
|
}
|
|
button:hover {
|
|
border-color: var(--color-primary);
|
|
}
|
|
button:focus,
|
|
button:focus-visible {
|
|
outline: 4px auto var(--color-focus);
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-light);
|
|
}
|
|
a:hover {
|
|
color: var(--color-secondary-dark);
|
|
}
|
|
button {
|
|
background-color: var(--color-bg-light);
|
|
}
|
|
}
|