/* ============================================================ EquiDiary — design tokens Offline PWA: fonts are self-hosted (no CDN). Drop the .woff2 files into /fonts and this file has zero network dependency. ============================================================ */ /* ---------- Self-hosted fonts (OFL — safe to bundle) ---------- */ /* Add the .woff2 files under /fonts. Remove these @font-face blocks and rely on the system stack in --font-* if you prefer zero webfonts. */ @font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("/fonts/HankenGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("/fonts/HankenGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ---------- Type ---------- */ --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ---------- Palette · light (default) ---------- */ --bg: #f1ede2; /* app canvas */ --card: #faf7ef; /* cards, sheets */ --ink: #1e1b15; /* primary text · 16.0:1 */ --muted: #6a6456; /* secondary text · 5.5:1 */ --line: #ddd7c7; /* hairlines, dividers */ --accent: #2e5d43; /* brand, actions, links · 7.1:1 */ --accent-ink: #faf7ef; /* text/icon on --accent · 7.1:1 */ /* ---------- Event categories · light ---------- -cat = dot / left-rail · -ink = accessible label text (AA on --card) -tint = chip background (hue @ ~13% over --card) */ --cat-training: #4e7a52; --cat-training-ink: #3d6a46; --cat-training-tint: #4e7a5222; --cat-competition: #b07d2b; --cat-competition-ink: #82600f; --cat-competition-tint: #b07d2b26; --cat-medical: #3d7a83; --cat-medical-ink: #2f6068; --cat-medical-tint: #3d7a8322; --cat-farrier: #a15b3c; --cat-farrier-ink: #8a4a30; --cat-farrier-tint: #a15b3c22; --cat-vaccination: #5b6cae; --cat-vaccination-ink: #4b5a9c; --cat-vaccination-tint: #5b6cae22; --cat-deworming: #7a8a3f; --cat-deworming-ink: #5b6a29; --cat-deworming-tint: #7a8a3f26; --cat-box: #8a7d63; --cat-box-ink: #675c46; --cat-box-tint: #8a7d6326; /* ---------- Radius ---------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* ---------- Spacing (8-pt base, 4 for fine work) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; /* ---------- Elevation ---------- */ --shadow-card: 0 4px 14px rgba(40,35,25,.08); --shadow-sheet: 0 12px 30px rgba(40,35,25,.16); } /* ---------- Palette · dark ---------- Applies with the OS setting, or force it with . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #15140e; --card: #201e15; --ink: #ebe6d7; /* 13.4:1 */ --muted: #a49d86; /* 6.2:1 */ --line: #37342a; --accent: #7cb392; /* 6.9:1 */ --accent-ink: #15140e; --cat-training: #8fbf97; --cat-training-ink: #8fbf97; --cat-training-tint: #4e7a5240; --cat-competition: #d9a94f; --cat-competition-ink: #d9a94f; --cat-competition-tint: #b07d2b40; --cat-medical: #71bac4; --cat-medical-ink: #71bac4; --cat-medical-tint: #3d7a8340; --cat-farrier: #d38b6c; --cat-farrier-ink: #d38b6c; --cat-farrier-tint: #a15b3c40; --cat-vaccination: #9aa8e2; --cat-vaccination-ink: #9aa8e2; --cat-vaccination-tint: #5b6cae40; --cat-deworming: #b4c274; --cat-deworming-ink: #b4c274; --cat-deworming-tint: #7a8a3f40; --cat-box: #c6b79c; --cat-box-ink: #c6b79c; --cat-box-tint: #8a7d6340; --shadow-card: 0 4px 14px rgba(0,0,0,.4); --shadow-sheet: 0 12px 30px rgba(0,0,0,.5); } } /* Manual override — — mirrors the block above. */ :root[data-theme="dark"] { color-scheme: dark; --bg:#15140e; --card:#201e15; --ink:#ebe6d7; --muted:#a49d86; --line:#37342a; --accent:#7cb392; --accent-ink:#15140e; --cat-training:#8fbf97; --cat-training-ink:#8fbf97; --cat-training-tint:#4e7a5240; --cat-competition:#d9a94f; --cat-competition-ink:#d9a94f; --cat-competition-tint:#b07d2b40; --cat-medical:#71bac4; --cat-medical-ink:#71bac4; --cat-medical-tint:#3d7a8340; --cat-farrier:#d38b6c; --cat-farrier-ink:#d38b6c; --cat-farrier-tint:#a15b3c40; --cat-vaccination:#9aa8e2; --cat-vaccination-ink:#9aa8e2; --cat-vaccination-tint:#5b6cae40; --cat-deworming:#b4c274; --cat-deworming-ink:#b4c274; --cat-deworming-tint:#7a8a3f40; --cat-box:#c6b79c; --cat-box-ink:#c6b79c; --cat-box-tint:#8a7d6340; --shadow-card:0 4px 14px rgba(0,0,0,.4); --shadow-sheet:0 12px 30px rgba(0,0,0,.5); }