/* Self-hosted variable fonts (latin subset). Display = Fraunces, UI = Inter. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/fraunces-latin.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('/fonts/fraunces-italic-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); } /* * Global theme + base styles for ForAllTi.me. * * Linked into every page's (see lib/head.ts -> SHARED_HEAD). * Only theme-dependent values live here as CSS custom properties: because * custom properties inherit across shadow-DOM boundaries, every Lit component * reads these `var(--*)` values from its own shadow root. Dark mode swaps them * by toggling `.dark` on (see ui/theme.ts). * * Theme-independent colors (buttons, the fun-text gradient, links, the sleep * cycle rings) are defined directly inside each component's `static styles`. */ :root { color-scheme: light; --bg: #f3eee4; --fg: #1c1814; --muted: #6b6358; --card-bg: #fcf8ef; --card-border: #e6dcc7; --hairline: #e8dfce; --accent: #c2410c; --accent-hover: #d4540f; --link: #b23b0a; --on-accent: #fff7ed; --secondary: #1e5a8a; --ghost-border: #e3dccd; --card-shadow: 0 1px 1px rgba(70, 48, 22, 0.07), 0 22px 46px -18px rgba(70, 48, 22, 0.46); --breathe-ring: #c2410c; --sidebar-bg: #ece4d6; --select-bg: #fbf6ec; --select-border: #e6dcc7; --select-fg: #1c1814; /* Display + UI fonts */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; } html.dark { color-scheme: dark; --bg: #15120e; --fg: #f2ece0; --muted: #b3a892; --card-bg: #23201a; --card-border: #332c22; --hairline: #241f17; --accent: #f59e0b; --accent-hover: #fbbf24; --link: var(--accent); --on-accent: #231703; --secondary: #6ba8d8; --ghost-border: #3b3225; --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 46px -24px #000; --breathe-ring: #f59e0b; --sidebar-bg: #1d1a14; --select-bg: #1e1a14; --select-border: #332c22; --select-fg: #f2ece0; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-sans); font-optical-sizing: auto; font-weight: 400; font-style: normal; background: var(--bg); color: var(--fg); min-height: 100vh; transition: background-color 0.2s ease, color 0.2s ease; } a { color: inherit; text-decoration: none; } /* The router outlet is a custom element (defaults to inline); make it a full-width block so pages constrain to the viewport. */ litro-outlet { display: block; width: 100%; } html { font-size: 16px; } @media (max-width: 319px) { html { font-size: 12px; } } @media (min-width: 1280px) { html { font-size: 20px; } }