/* * Clarity Air design tokens. * Single source of truth — every other CSS file references these. * Lane variants: data-lane="teams" | "mobile" on . * Theme variants: data-theme="light" | "dark" on . */ :root { /* ----- Brand palette ----- */ --clarity-indigo-50: #eef0fe; --clarity-indigo-100: #d4d8fc; --clarity-indigo-300: #8a94f4; --clarity-indigo-500: #4253e9; --clarity-indigo-700: #2b3bbf; --clarity-indigo-900: #1b2380; --clarity-gold-100: #f4e6d0; --clarity-gold-300: #d9b076; --clarity-gold-500: #c4903a; --clarity-gold-700: #8e6624; --clarity-cream-50: #faf6ee; --clarity-cream-100: #f5f0e6; --clarity-cream-200: #ebe2d0; --clarity-ink-900: #0f1226; --clarity-ink-700: #2a2e4d; --clarity-ink-500: #5b5f7a; --clarity-ink-300: #9499b3; --clarity-ink-100: #e6e8ef; --clarity-success: #0f8a4f; --clarity-warning: #c47a05; --clarity-danger: #c43030; /* ----- Type scale (1.250 minor third) ----- */ --clarity-text-xs: 0.75rem; --clarity-text-sm: 0.875rem; --clarity-text-base: 1rem; --clarity-text-md: 1.125rem; --clarity-text-lg: 1.25rem; --clarity-text-xl: 1.5rem; --clarity-text-2xl: 1.875rem; --clarity-text-3xl: 2.25rem; --clarity-text-4xl: 3rem; --clarity-text-5xl: 3.75rem; --clarity-text-6xl: 4.5rem; --clarity-leading-tight: 1.15; --clarity-leading-snug: 1.3; --clarity-leading-normal: 1.55; --clarity-leading-loose: 1.75; --clarity-tracking-tight: -0.02em; --clarity-tracking-base: 0; --clarity-tracking-wide: 0.04em; /* ----- Font families (set @font-face in base.css after fonts ship) ----- */ --clarity-font-display: "Sentient", Georgia, serif; --clarity-font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --clarity-font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace; /* ----- Spacing (4px base, 1.5x rhythm) ----- */ --clarity-space-1: 0.25rem; --clarity-space-2: 0.5rem; --clarity-space-3: 0.75rem; --clarity-space-4: 1rem; --clarity-space-6: 1.5rem; --clarity-space-8: 2rem; --clarity-space-12: 3rem; --clarity-space-16: 4rem; --clarity-space-24: 6rem; --clarity-space-32: 8rem; /* ----- Radii ----- */ --clarity-radius-sm: 4px; --clarity-radius-md: 8px; --clarity-radius-lg: 16px; --clarity-radius-pill: 9999px; /* ----- Motion ----- */ --clarity-duration-fast: 160ms; --clarity-duration-normal: 240ms; --clarity-duration-slow: 320ms; --clarity-ease-standard: cubic-bezier(0.2, 0, 0, 1); --clarity-ease-decelerate: cubic-bezier(0, 0, 0, 1); --clarity-ease-accelerate: cubic-bezier(0.3, 0, 1, 1); /* ----- Layout ----- */ --clarity-content-max: 72rem; /* 1152px */ --clarity-readable-max: 42rem; /* 672px — long-form text */ --clarity-gutter-mobile: var(--clarity-space-4); --clarity-gutter-desktop: var(--clarity-space-12); /* ----- Default theme = light ----- */ --bg: var(--clarity-cream-50); --bg-elevated: #ffffff; --fg: var(--clarity-ink-900); --fg-muted: var(--clarity-ink-500); --fg-subtle: var(--clarity-ink-300); --border: var(--clarity-ink-100); --accent: var(--clarity-indigo-500); --accent-fg: #ffffff; --link: var(--clarity-indigo-700); --link-visited: var(--clarity-indigo-900); } /* ----- Dark theme ----- */ [data-theme="dark"] { --bg: var(--clarity-ink-900); --bg-elevated: #1a1d3a; --fg: var(--clarity-cream-50); --fg-muted: var(--clarity-ink-300); --fg-subtle: var(--clarity-ink-500); --border: var(--clarity-ink-700); --accent: var(--clarity-indigo-300); --accent-fg: var(--clarity-ink-900); --link: var(--clarity-indigo-300); --link-visited: var(--clarity-indigo-100); } /* ----- Lane: Teams (Modern Confident) ----- */ [data-lane="teams"] { --lane-accent: var(--clarity-indigo-500); --lane-accent-strong: var(--clarity-indigo-700); --lane-surface: var(--clarity-cream-50); --lane-display-font: var(--clarity-font-display); --lane-tracking: var(--clarity-tracking-tight); } /* ----- Lane: Mobile (Crafted Industrial) ----- */ [data-lane="mobile"] { --lane-accent: var(--clarity-gold-500); --lane-accent-strong: var(--clarity-gold-700); --lane-surface: var(--clarity-cream-100); --lane-display-font: var(--clarity-font-display); --lane-tracking: var(--clarity-tracking-base); } /* ----- Reduced motion ----- */ @media (prefers-reduced-motion: reduce) { :root { --clarity-duration-fast: 0ms; --clarity-duration-normal: 0ms; --clarity-duration-slow: 0ms; } } /* ----- System theme preference (when data-theme not set) ----- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: var(--clarity-ink-900); --bg-elevated: #1a1d3a; --fg: var(--clarity-cream-50); --fg-muted: var(--clarity-ink-300); --fg-subtle: var(--clarity-ink-500); --border: var(--clarity-ink-700); --accent: var(--clarity-indigo-300); --accent-fg: var(--clarity-ink-900); --link: var(--clarity-indigo-300); --link-visited: var(--clarity-indigo-100); } }