Yisroel Baum
34da76607f
introduce a single shared stylesheet under public/css. this first section covers a minimal reset, warm/readable design tokens (color, typography, spacing, radii, shadows), and base element styling for headings, links, lists, forms, and buttons. layout primitives and component classes follow in subsequent commits.
218 lines
4.6 KiB
CSS
218 lines
4.6 KiB
CSS
/* =========================================================================
|
|
Daily Goals - app.css
|
|
Single shared stylesheet. Sectioned for readability.
|
|
========================================================================= */
|
|
|
|
/* -------------------------------------------------------------------------
|
|
1. Reset
|
|
------------------------------------------------------------------------- */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
img,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------
|
|
2. Design tokens
|
|
------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
/* Color: warm, readable palette */
|
|
--color-bg: #faf7f2;
|
|
--color-surface: #ffffff;
|
|
--color-surface-alt: #f3ede2;
|
|
--color-text: #2b2622;
|
|
--color-text-muted: #6b5d52;
|
|
--color-primary: #5a7a4f;
|
|
--color-primary-hover: #486340;
|
|
--color-accent: #8a5a3b;
|
|
--color-accent-hover: #6f4730;
|
|
--color-border: #e3dccf;
|
|
--color-border-strong: #c9bfae;
|
|
--color-danger: #a94442;
|
|
--color-success: #4f7a5a;
|
|
|
|
/* Typography */
|
|
--font-serif: Georgia, "Iowan Old Style", "Source Serif Pro", serif;
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
|
|
sans-serif;
|
|
--font-size-base: 1rem;
|
|
--font-size-sm: 0.875rem;
|
|
--font-size-lg: 1.125rem;
|
|
--font-size-h1: 2rem;
|
|
--font-size-h2: 1.5rem;
|
|
--font-size-h3: 1.25rem;
|
|
--line-height-base: 1.6;
|
|
--line-height-tight: 1.25;
|
|
|
|
/* Spacing scale */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.5rem;
|
|
--space-6: 2rem;
|
|
--space-7: 3rem;
|
|
|
|
/* Layout */
|
|
--max-width: 42rem;
|
|
--max-width-wide: 60rem;
|
|
|
|
/* Radii */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(43, 38, 34, 0.06);
|
|
--shadow-md: 0 4px 12px rgba(43, 38, 34, 0.1);
|
|
--shadow-lg: 0 12px 32px rgba(43, 38, 34, 0.18);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 120ms ease;
|
|
--transition-base: 200ms ease;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------
|
|
3. Base elements
|
|
------------------------------------------------------------------------- */
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-sans);
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-base);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--font-serif);
|
|
font-weight: 600;
|
|
line-height: var(--line-height-tight);
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--font-size-h1);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--font-size-h2);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--font-size-h3);
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--color-accent-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="date"],
|
|
input[type="number"],
|
|
textarea,
|
|
select {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: var(--space-1);
|
|
padding: var(--space-2) var(--space-3);
|
|
background-color: var(--color-surface);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border-strong);
|
|
border-radius: var(--radius-sm);
|
|
transition: border-color var(--transition-fast),
|
|
box-shadow var(--transition-fast);
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px rgba(90, 122, 79, 0.15);
|
|
}
|
|
|
|
button {
|
|
display: inline-block;
|
|
padding: var(--space-2) var(--space-4);
|
|
background-color: var(--color-surface);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border-strong);
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 500;
|
|
transition: background-color var(--transition-fast),
|
|
border-color var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
|
|
button:hover,
|
|
button:focus {
|
|
background-color: var(--color-surface-alt);
|
|
border-color: var(--color-text-muted);
|
|
}
|
|
|
|
form {
|
|
margin: 0;
|
|
}
|