/* Design tokens (Design Sprint 1). Every value in the product traces back to this file. Purple accent from TwoDot branding, used for primary actions, selection and live state only, never decoration. Light palette lives on :root; dark overrides follow system preference or an explicit [data-theme] set from Settings > Appearance. Confirmed design decisions (binding for later sprints): - Spacing: page/layout spacing follows the 8pt system; 4px and 12px are micro-spacing exceptions for component internals only. - Body text is 16px (--text-base); secondary metadata uses 14px (--text-sm) where it needs to recede. - The Focus timer is 48px (--text-hero), the top of the type scale. */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- Type scale: seven steps, each clearly distinct from its neighbours so nothing reads as "roughly the same size". 12 caption labels, meta, badges, eyebrows 14 small secondary text, inputs, buttons 16 body reading text, list and card titles 20 title card headings, dialog titles, emphasised values 28 heading section heroes (the Next card) 36 display page titles 48 hero one number per screen at most (Focus timer) */ --type-12: 12px; --type-14: 14px; --type-16: 16px; --type-20: 20px; --type-28: 28px; --type-36: 36px; --type-48: 48px; /* Legacy names, re-pointed onto the scale above so every existing component snaps to it without a per-file rewrite. The old values (11 / 13 / 14.5 / 15 / 17) sat so close together that hierarchy collapsed; they now resolve to real steps. */ --text-2xs: var(--type-12); --text-xs: var(--type-12); --text-sm: var(--type-14); --text-base: var(--type-16); --text-md: var(--type-16); --text-lg: var(--type-20); --text-xl: var(--type-20); --text-2xl: var(--type-28); --text-3xl: var(--type-36); --text-4xl: var(--type-48); --text-hero: var(--type-48); /* Line height pairs with size: tight for large type, open for reading. */ --leading-tight: 1.15; /* 28px and up */ --leading-snug: 1.35; /* 16-20px headings, card titles */ --leading-normal: 1.6; /* body and reading text */ --leading-control: 20px; /* buttons and inputs: fixed, so heights are exact */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 650; --tracking-display: -0.025em; /* 28px and up */ --tracking-title: -0.012em; /* 16-20px */ --tracking-caps: 0.06em; /* uppercase eyebrows only */ /* ---- Neutral ramp. Authored in OKLCH, every step tinted toward the accent hue (290) so greys read as part of the brand rather than as default grey, and never pure white or black. The canvas sits a visible step below the surfaces on it, so depth comes from layering instead of outlines. Contrast verified against WCAG AA: every text tone below clears 4.5:1 on every surface tone it's used on. */ --neutral-0: oklch(0.997 0.002 290); /* raised surfaces: cards, dialogs */ --neutral-50: oklch(0.962 0.007 290); /* app canvas */ --neutral-100: oklch(0.952 0.008 290); /* filled controls, tracks */ --neutral-150: oklch(0.928 0.010 290); /* filled-control hover */ --neutral-200: oklch(0.925 0.009 290); /* hairline borders */ --neutral-300: oklch(0.870 0.012 290); /* strong borders, control outlines */ --neutral-500: oklch(0.515 0.030 290); /* faint text */ --neutral-600: oklch(0.465 0.030 290); /* muted text */ --neutral-900: oklch(0.215 0.022 290); /* primary text */ /* Surfaces */ --color-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-2: var(--neutral-100); --color-surface-3: var(--neutral-150); --color-surface-raised: var(--neutral-0); --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); /* Text */ --color-text: var(--neutral-900); --color-text-muted: var(--neutral-600); --color-text-faint: var(--neutral-500); --color-on-accent: oklch(0.995 0.004 290); /* Brand */ --color-accent: #6d4fe0; --color-accent-hover: #5d3fd0; --color-accent-active: #4f34c4; --color-accent-soft: #efeafc; --color-accent-soft-text: #5d3fd0; --color-accent-rgb: 109, 79, 224; /* Semantic */ --color-danger: #d64545; --color-danger-soft: #fbeaea; --color-warning: #b8790c; --color-warning-soft: #fbf1de; --color-success: #2f9e5b; --color-success-soft: #e8f6ee; --color-info-soft: #eef1fc; /* Priority accents (used for badges/dots only — never full borders) */ --color-critical: #d64545; --color-high: #b8790c; /* ---- Shape. Radius grows with the size of the thing it rounds: small controls stay crisp, cards and dialogs go soft. */ --radius-xs: 6px; /* badges' square cousins, kbd, tiny chips */ --radius-sm: 10px; /* buttons, inputs */ --radius-md: 14px; /* list rows, small cards, control tracks */ --radius-lg: 18px; /* cards, panels, dialogs */ --radius-xl: 24px; /* hero cards */ --radius-pill: 999px; /* ---- Elevation. Each level layers a tight contact shadow with a soft ambient one, tinted toward the brand hue instead of pure black, so depth reads as light rather than as a grey smudge. --ring-hairline is the "almost invisible border": a 1px inset shadow that defines an edge without the weight of a drawn outline. */ --shadow-xs: 0 1px 2px rgba(30, 24, 56, 0.05); --shadow-sm: 0 1px 2px rgba(30, 24, 56, 0.04), 0 2px 8px rgba(30, 24, 56, 0.05); --shadow-md: 0 2px 4px rgba(30, 24, 56, 0.04), 0 8px 24px rgba(30, 24, 56, 0.08); --shadow-lg: 0 4px 12px rgba(30, 24, 56, 0.06), 0 24px 56px rgba(30, 24, 56, 0.16); --shadow-hover: 0 2px 4px rgba(30, 24, 56, 0.05), 0 12px 28px rgba(30, 24, 56, 0.10); --shadow-focus: 0 0 0 3px rgba(var(--color-accent-rgb), 0.28); --ring-hairline: inset 0 0 0 1px rgba(30, 24, 56, 0.07); /* ---- Spacing: an 8pt system. Layout rhythm (between sections, page gutters, card padding) uses only the 8pt steps: 8, 16, 24, 32, 48, 64. The 4px half-step exists for component internals where 8 is visibly too loose (icon-to-label gaps, badge padding); 12 is the half-step between 8 and 16 for the same reason. Nothing arbitrary. */ --space-1: 4px; /* half-step: component internals only */ --space-2: 8px; --space-3: 12px; /* half-step: component internals only */ --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --sidebar-width: 240px; /* ---- Controls: one height per size, shared by buttons and inputs so they line up on the same row without per-component nudging. */ --control-sm: 32px; --control-md: 40px; --control-lg: 48px; /* ---- Icons: sized on the same 8pt rhythm; one stroke weight. */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* ---- Motion. Timings and the easing curve are the binding ones from docs/design/INTERACTION_GUIDELINES.md Section 2 (fast / base / slow, one decelerating curve). Motion only ever says what changed: never decoration. Reduced motion collapses all of it, globally, below. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; /* hover, press feedback */ --duration-base: 180ms; /* state changes */ --duration-slow: 260ms; /* dialogs opening and closing */ --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-base) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); /* ---- App shell (Design Sprint 2). Additive: none of the Sprint 1 tokens above change. The sidebar gets its own "chrome" neutral, a step below the canvas, so it recedes instead of reading as the brightest surface on screen. Navigation states use translucent ink over that chrome rather than accent fills, so the active row is clear without glowing. */ --color-chrome: oklch(0.948 0.008 290); --nav-ink-hover: rgba(30, 24, 56, 0.045); --nav-ink-active: rgba(30, 24, 56, 0.075); --color-danger-text: oklch(0.50 0.16 25); /* restrained urgency: deeper, calmer red for text-only emphasis */ --shell-content: 832px; /* one content column width for every route */ --shell-gutter: 48px; /* page side padding, desktop */ --shell-top: 48px; /* top offset to the page title block */ --fab-size: 48px; --tabbar-h: 56px; /* mobile tab bar, excluding the safe-area inset */ --touch-min: 44px; /* minimum touch target on phones (Sprint 4): one value, used everywhere */ --active-strip-h: var(--touch-min); /* mobile Active Task strip above the tab bar */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #131218; --color-surface: #1b1a22; --color-surface-2: #221f2b; --color-surface-3: #2a2735; --color-surface-raised: #232130; --color-border: #322f3d; --color-border-strong: #3d3a4a; --color-text: #f1eff7; --color-text-muted: #b3aec6; --color-text-faint: #8b869e; --color-accent: #9377f2; --color-accent-hover: #a689f5; --color-accent-active: #b39ff7; --color-accent-soft: #2a2440; --color-accent-soft-text: #b7a2f7; --color-accent-rgb: 147, 119, 242; --color-danger: #ec6a6a; --color-danger-soft: #3a2226; --color-warning: #dba94b; --color-warning-soft: #382d1c; --color-success: #5cc98a; --color-success-soft: #1e3327; --color-info-soft: #23233a; --color-critical: #ec6a6a; --color-high: #dba94b; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5); --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.4); --ring-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.06); --color-chrome: #0f0e13; --nav-ink-hover: rgba(255, 255, 255, 0.045); --nav-ink-active: rgba(255, 255, 255, 0.08); --color-danger-text: #ec6a6a; } } :root[data-theme="dark"] { --color-bg: #131218; --color-surface: #1b1a22; --color-surface-2: #221f2b; --color-surface-3: #2a2735; --color-surface-raised: #232130; --color-border: #322f3d; --color-border-strong: #3d3a4a; --color-text: #f1eff7; --color-text-muted: #b3aec6; --color-text-faint: #8b869e; --color-accent: #9377f2; --color-accent-hover: #a689f5; --color-accent-active: #b39ff7; --color-accent-soft: #2a2440; --color-accent-soft-text: #b7a2f7; --color-accent-rgb: 147, 119, 242; --color-danger: #ec6a6a; --color-danger-soft: #3a2226; --color-warning: #dba94b; --color-warning-soft: #382d1c; --color-success: #5cc98a; --color-success-soft: #1e3327; --color-info-soft: #23233a; --color-critical: #ec6a6a; --color-high: #dba94b; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.5); --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.4); --ring-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.06); --color-chrome: #0f0e13; --nav-ink-hover: rgba(255, 255, 255, 0.045); --nav-ink-active: rgba(255, 255, 255, 0.08); --color-danger-text: #ec6a6a; }