/* changelle.me — design tokens v0.3 (Daybreak · Tide palette) Import after fonts/fonts.css. Light is default; dark follows the OS (prefers-color-scheme) or can be forced with . */ :root { /* ---- brand primitives (never change per theme) ---- */ --cl-seasalt: #F3F6F6; --cl-shell: #E6EEEE; --cl-white: #FFFFFF; --cl-line: #D5E0E0; --cl-stone: #5A6B6E; --cl-graphite: #3E5256; --cl-ink: #10262B; --cl-deepsea: #24506A; --cl-deepsea-soft: #DAE6EC; --cl-teal: #087A80; --cl-teal-deep: #06666B; --cl-sunsoft: #FFF1CC; --cl-return: #6D6A8C; --cl-return-soft: #ECEBF3; --cl-error: #B42318; --cl-error-soft: #FDECEA; --cl-night: #0A181B; --cl-night-2: #122428; --cl-night-line: #21373C; --cl-foam: #EAF3F3; --cl-teal-night: #3CC6C9; --cl-deepsea-night: #7FB3D0; /* ---- semantic (light) ---- */ --c-bg: var(--cl-seasalt); --c-surface: var(--cl-white); --c-surface-2: var(--cl-shell); --c-line: var(--cl-line); --c-text: var(--cl-ink); --c-text-muted: var(--cl-stone); --c-brand: var(--cl-deepsea); /* us + the group */ --c-group: var(--cl-deepsea); --c-group-track: var(--cl-deepsea-soft); --c-progress: var(--cl-teal); /* done days, streaks, primary CTA ONLY */ --c-progress-text: var(--cl-teal-deep); /* teal-coloured text & links */ --c-on-progress: #FFFFFF; /* white text on Teal (5.1:1) */ --c-upcoming: var(--cl-line); --c-return: var(--cl-return); /* missed day = calm, never red */ --c-return-bg: var(--cl-return-soft); --c-highlight: var(--cl-sunsoft); --c-error: var(--cl-error); /* system errors only (payment failed…) */ --c-error-bg: var(--cl-error-soft); /* ---- type ---- */ --font-display: "Geologica", system-ui, sans-serif; --font-body: "Onest", system-ui, sans-serif; --fs-display: clamp(48px, 7vw, 96px); --fs-h1: clamp(32px, 4vw, 56px); --fs-h2: clamp(24px, 3vw, 40px); --fs-h3: clamp(20px, 2vw, 28px); --fs-body: 17px; --fs-chat: 15px; --fs-small: 15px; --fs-caption: 13px; --fs-eyebrow: 12px; --lh-tight: 1.05; --lh-heading: 1.15; --lh-body: 1.5; --tracking-display: -0.03em; --tracking-wordmark: -0.035em; --tracking-eyebrow: 0.08em; /* ---- shape & space ---- */ --r-pill: 999px; --r-card: 22px; --r-sheet: 28px; --r-button: 16px; --r-chip: 999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --tap-min: 48px; --btn-h: 56px; --shadow-card: 0 1px 0 var(--c-line), 0 8px 24px rgb(28 38 34 / 0.06); --shadow-float: 0 1px 0 var(--c-line), 0 20px 50px rgb(28 38 34 / 0.10); /* ---- day strip ---- */ --strip-h-s: 6px; --strip-today-s: 10px; --strip-gap-s: 3px; --strip-h-m: 10px; --strip-today-m: 16px; --strip-gap-m: 4px; --strip-h-l: 16px; --strip-today-l: 24px; --strip-gap-l: 5px; /* ---- motion ---- */ --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 400ms; --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.45, 0, .25, 1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-bg: var(--cl-night); --c-surface: var(--cl-night-2); --c-surface-2: var(--cl-night-2); --c-line: var(--cl-night-line); --c-text: var(--cl-foam); --c-text-muted: #93A7AA; --c-brand: var(--cl-deepsea-night); --c-group: var(--cl-deepsea-night); --c-group-track: #1C3440; --c-progress: var(--cl-teal-night); --c-progress-text: var(--cl-teal-night); --c-on-progress: var(--cl-night); --c-upcoming: var(--cl-night-line); --c-return: #A6A3C6; --c-return-bg: #26253D; --c-highlight: #3A3320; } } :root[data-theme="dark"] { --c-bg: var(--cl-night); --c-surface: var(--cl-night-2); --c-surface-2: var(--cl-night-2); --c-line: var(--cl-night-line); --c-text: var(--cl-foam); --c-text-muted: #93A7AA; --c-brand: var(--cl-deepsea-night); --c-group: var(--cl-deepsea-night); --c-group-track: #1C3440; --c-progress: var(--cl-teal-night); --c-progress-text: var(--cl-teal-night); --c-on-progress: var(--cl-night); --c-upcoming: var(--cl-night-line); --c-return: #A6A3C6; --c-return-bg: #26253D; --c-highlight: #3A3320; } @media (prefers-reduced-motion: reduce) { :root { --dur-base: 120ms; --dur-slow: 120ms; } } /* ---- minimal base + primitives ---- */ body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 var(--fs-body)/var(--lh-body) var(--font-body); } .cl-display, .cl-h1, .cl-h2, .cl-h3 { font-family: var(--font-display); font-weight: 600; margin: 0; } .cl-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); } .cl-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; } .cl-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); } .cl-h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; } .cl-eyebrow { font: 600 var(--fs-eyebrow)/1 var(--font-body); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-text-muted); } .cl-num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .cl-num-total { color: var(--c-text-muted); font-weight: 400; } .cl-wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-wordmark); } .cl-wordmark .cl-change { color: var(--c-progress); } .cl-wordmark .cl-dot { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--c-progress); margin: 0 .02em 0 .05em; } .cl-btn { min-height: var(--btn-h); padding: 0 28px; border: 0; border-radius: var(--r-button); font: 700 17px var(--font-body); cursor: pointer; background: var(--c-progress); color: var(--c-on-progress); transition: transform var(--dur-fast) var(--ease-out); } .cl-btn:active { transform: scale(.97); } .cl-btn-secondary { background: transparent; color: var(--c-text); border: 1.5px solid currentColor; font-weight: 600; } .cl-card { background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); } .cl-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-chip); background: var(--c-surface-2); font-size: 13px; font-weight: 600; } .cl-group-bar { height: 8px; border-radius: var(--r-pill); background: var(--c-group-track); overflow: hidden; } .cl-group-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--c-group); transition: width var(--dur-slow) var(--ease-out); }