add app.css with reset and design tokens

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.
This commit is contained in:
Yisroel Baum 2026-05-01 11:23:41 +03:00
parent d885319597
commit 34da76607f
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9

218
public/css/app.css Normal file
View file

@ -0,0 +1,218 @@
/* =========================================================================
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;
}