/* Design tokens. Light is the base palette; dark overrides only the values that change. `data-theme` on wins over the system preference in both directions. */ :root { /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, system-ui, sans-serif; --font-num: ui-rounded, 'SF Pro Rounded', 'Avenir Next', var(--font-sans); /* Spacing / shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --pad-page: clamp(12px, 3vw, 32px); /* Surfaces */ --bg: #f4f4f6; --surface: #ffffff; --surface-2: #eaeaee; --line: #dededf; --line-strong: #bcbcc4; /* Ink */ --text: #17171b; --text-dim: #5f5f6a; --text-faint: #8e8e9a; /* Accents */ --accent: #7c46e0; --accent-ink: #ffffff; --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --today: #e5348a; --match: #f0a02a; /* Calendar cells. With i = credit + boost: background = hsl(hue, sat0 + i * satk, l0 - i * k) Saturation rises with intensity as well as darkness — that is what keeps a period nobody wrote in from looking like a wall of data. An untouched period day lands near grey; a written day carries real colour. `boost` is added only for days that actually carry an entry. */ --cell-sat0: 20%; --cell-satk: 0.55%; --cell-l0: 95.5%; --cell-k: 0.44%; --logged-boost: 26; --logged-veil: rgb(0 0 0 / 14%); /* Intensity used for the swatches in the legend and the day panel. */ --swatch-i: 46; --cell-gap: 1.5px; --cell-empty: #e3e3e7; --cell-future: #f8f8fa; --cell-future-line: #ededf0; /* Effects */ --shadow-sm: 0 1px 2px rgb(20 20 30 / 6%), 0 2px 8px rgb(20 20 30 / 5%); --shadow-lg: 0 6px 16px rgb(20 20 30 / 10%), 0 24px 48px rgb(20 20 30 / 12%); --ring: 0 0 0 3px var(--accent-soft); --blur: saturate(1.6) blur(14px); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #101017; --surface: #1a1a23; --surface-2: #23232e; --line: #2e2e3a; --line-strong: #43434f; --text: #eeeef5; --text-dim: #9c9cb0; --text-faint: #6e6e82; --accent: #a98cf7; --accent-ink: #17102b; --today: #ff5fa8; --match: #ffc45c; --cell-sat0: 21%; --cell-satk: 0.47%; --cell-l0: 18%; --cell-k: -0.3%; --logged-boost: 24; --logged-veil: rgb(255 255 255 / 16%); --cell-empty: #212129; --cell-future: #16161d; --cell-future-line: #282833; --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 10px rgb(0 0 0 / 30%); --shadow-lg: 0 8px 20px rgb(0 0 0 / 45%), 0 28px 56px rgb(0 0 0 / 45%); color-scheme: dark; } } :root[data-theme='dark'] { --bg: #101017; --surface: #1a1a23; --surface-2: #23232e; --line: #2e2e3a; --line-strong: #43434f; --text: #eeeef5; --text-dim: #9c9cb0; --text-faint: #6e6e82; --accent: #a98cf7; --accent-ink: #17102b; --today: #ff5fa8; --match: #ffc45c; --cell-sat0: 21%; --cell-satk: 0.47%; --cell-l0: 18%; --cell-k: -0.3%; --logged-boost: 24; --logged-veil: rgb(255 255 255 / 16%); --cell-empty: #212129; --cell-future: #16161d; --cell-future-line: #282833; --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 10px rgb(0 0 0 / 30%); --shadow-lg: 0 8px 20px rgb(0 0 0 / 45%), 0 28px 56px rgb(0 0 0 / 45%); color-scheme: dark; }