/* Shared design tokens for the live app and the offline HTML-viewer export. * Both `frontend/src/app.css` and `frontend/export-viewer/src/app.css` import this file * so the keepsake stays visually in sync with the live app. Edit tokens here, rebuild * the export-viewer, and re-commit `backend/static/export-viewer/`. * * Tailwind v4 reads `@theme` blocks to populate utility classes; everything declared * here becomes a `bg-primary`, `text-accent`, `rounded-card`, etc. */ @import "tailwindcss"; /* Class-based dark variant. Tailwind v4 defaults to `prefers-color-scheme`; we want * the user's explicit selection (saved in `theme-store.ts`) to win, so we re-bind * the `dark:` variant to apply whenever `` has the `dark` class. * `:where(...)` keeps the specificity low so existing utilities still override. */ @custom-variant dark (&:where(.dark, .dark *)); @theme { /* Brand palette — the blue used for primary buttons, FAB, active tabs. */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; /* Accent for hashtag chips and highlights. */ --color-accent-500: #a855f7; --color-accent-600: #9333ea; /* Surface scale matches the existing gray-* usage. Listed here so the viewer * picks up the same shade in case Tailwind defaults ever drift. */ --color-surface-0: #ffffff; --color-surface-50: #f9fafb; --color-surface-100: #f3f4f6; --color-surface-200: #e5e7eb; /* Typography. Keepsake should feel like the live app — same defaults. */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Courier New", monospace; /* Radii — keep cards and bottom sheets consistent. */ --radius-card: 0.75rem; /* rounded-card */ --radius-sheet: 1.25rem; /* rounded-sheet */ } /* Baseline body background + text colour so pages that haven't been re-themed yet * at least don't render light-on-light or dark-on-dark. Pages and cards still set * their own backgrounds via `bg-*` utilities, but this catches any gaps. */ @layer base { html { background-color: #f9fafb; /* matches bg-gray-50 */ color: #111827; /* matches text-gray-900 */ color-scheme: light; } html.dark { background-color: #030712; /* matches bg-gray-950 */ color: #f3f4f6; /* matches text-gray-100 */ color-scheme: dark; } }