/* ============================================================ CountUp — design tokens (CSS custom properties) BUILD OUTPUT of tokens.json. Do not edit by hand — edit tokens.json and rebuild (see design-system/README.md). Primary consumable for web/Blazor scoped CSS. Usage: color: var(--cu-color-ink); Theme: default = light. Add data-theme="dark" on (or rely on prefers-color-scheme) to flip. ============================================================ */ :root { /* ---- Brand ---- */ --cu-color-brand-teal: #0BA8A0; --cu-color-brand-blue: #4F7DF0; --cu-color-brand-violet: #7C5CFF; --cu-color-primary: #6D5CF5; --cu-color-on-primary: #FFFFFF; /* ---- Brand gradient ---- */ --cu-gradient-brand-angle: 120deg; --cu-gradient-brand: linear-gradient(120deg, #0BA8A0 0%, #4F7DF0 52%, #7C5CFF 100%); /* ---- Status ---- */ --cu-color-success: #22C07A; --cu-color-warning: #F5A524; --cu-color-danger: #F2545B; /* ---- Category (per-habit identity) ---- */ --cu-category-angle: 135deg; --cu-color-category-green-solid: #22C07A; --cu-color-category-green-from: #22C07A; --cu-color-category-green-to: #15915B; --cu-color-category-teal-solid: #0BA8A0; --cu-color-category-teal-from: #12B3AB; --cu-color-category-teal-to: #0A8C85; --cu-color-category-blue-solid: #3B82F6; --cu-color-category-blue-from: #3B82F6; --cu-color-category-blue-to: #2563EB; --cu-color-category-indigo-solid: #6366F1; --cu-color-category-indigo-from: #6366F1; --cu-color-category-indigo-to: #4338CA; --cu-color-category-violet-solid: #8B5CF6; --cu-color-category-violet-from: #8B5CF6; --cu-color-category-violet-to: #6D28D9; --cu-color-category-amber-solid: #F5A524; --cu-color-category-amber-from: #F5A524; --cu-color-category-amber-to: #D97706; /* ---- Semantic surfaces / text (LIGHT) ---- */ --cu-color-bg: #F6F7FB; --cu-color-surface: #FFFFFF; --cu-color-surface-2: #EEF0F7; --cu-color-border: #E4E6EF; --cu-color-ink: #16161D; --cu-color-ink-2: #585A6B; --cu-color-ink-3: #8C8EA0; /* ---- Fixed dark scale (always-dark surfaces, e.g. the logging arc — do NOT flip) ---- */ --cu-color-darkscale-bg: #0D0D16; --cu-color-darkscale-surface: #171723; --cu-color-darkscale-surface-2: #21213A; --cu-color-darkscale-border: #2E2E48; --cu-color-darkscale-ink: #ECECF6; --cu-color-darkscale-ink-2: #A6A6C2; --cu-color-darkscale-ink-3: #6E6E8C; /* ---- Typography ---- */ --cu-font-display: 'Space Grotesk', sans-serif; --cu-font-text: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cu-font-weight-regular: 400; --cu-font-weight-medium: 500; --cu-font-weight-semibold: 600; --cu-font-weight-bold: 700; --cu-font-weight-extrabold: 800; --cu-font-size-display: 46px; --cu-font-size-title: 36px; --cu-font-size-heading: 28px; --cu-font-size-subhead: 20px; --cu-font-size-body-lg: 18.5px; --cu-font-size-body: 17px; --cu-font-size-secondary: 14px; --cu-font-size-caption: 13px; --cu-font-size-micro: 11px; --cu-line-height-tight: 1.05; --cu-line-height-snug: 1.3; --cu-line-height-normal: 1.55; --cu-line-height-relaxed: 1.6; --cu-letter-spacing-tight: -0.03em; --cu-letter-spacing-snug: -0.02em; --cu-letter-spacing-normal: 0em; --cu-letter-spacing-wide: 0.08em; /* ---- Spacing ---- */ --cu-space-2: 2px; --cu-space-xs: 4px; --cu-space-sm: 8px; --cu-space-md: 12px; --cu-space-lg: 16px; --cu-space-xl: 20px; --cu-space-2xl: 24px; --cu-space-3xl: 32px; --cu-space-4xl: 40px; --cu-space-5xl: 48px; --cu-space-6xl: 64px; /* ---- Radius ---- */ --cu-radius-sm: 10px; --cu-radius-md: 13px; --cu-radius-lg: 16px; --cu-radius-xl: 18px; --cu-radius-2xl: 20px; --cu-radius-3xl: 22px; --cu-radius-full: 999px; /* ---- Shadow ---- */ --cu-shadow-sm: 0 1px 3px rgba(16,16,40,0.06); --cu-shadow-md: 0 6px 20px rgba(16,16,40,0.08); --cu-shadow-brand: 0 10px 26px rgba(109,92,245,0.28); /* ---- Motion ---- */ --cu-duration-fast: 150ms; --cu-duration-base: 240ms; --cu-duration-celebrate: 1900ms; --cu-easing-standard: cubic-bezier(0.2, 0, 0, 1); --cu-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================ DARK THEME — flips semantic surface/text tokens only. Brand, status, category, type, spacing, radius are stable. Explicit opt-in: ============================================================ */ :root[data-theme="dark"], [data-theme="dark"] { --cu-color-bg: #0D0D16; --cu-color-surface: #171723; --cu-color-surface-2: #21213A; --cu-color-border: #2E2E48; --cu-color-ink: #ECECF6; --cu-color-ink-2: #A6A6C2; --cu-color-ink-3: #6E6E8C; } /* System-preference fallback (only when no explicit data-theme is set) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cu-color-bg: #0D0D16; --cu-color-surface: #171723; --cu-color-surface-2: #21213A; --cu-color-border: #2E2E48; --cu-color-ink: #ECECF6; --cu-color-ink-2: #A6A6C2; --cu-color-ink-3: #6E6E8C; } }