/* ============================================================ DESIGN TOKENS The single source of truth for every colour, gradient, size, radius, duration and curve. Nothing outside this file may hard-code a design value. Two families deliberately kept apart: CONTENT goal cards. Rich, dimensional, colourful. They are the product's central objects. CHROME navigation, sheets, floating controls. Translucent, restrained, and never competing with content. ============================================================ */ :root { color-scheme: dark; /* ---- foundation ------------------------------------------------ */ /* True Black is the ground: deepest backgrounds and negative space. Cod Gray is the first surface lifted off it. */ --bg: #000000; --bg-raised: #111111; --surface: #111111; --surface-2: #1A1A1A; --surface-3: #242424; /* ---- text ------------------------------------------------------ */ --text-1: #FFFFFF; --text-2: #ADB2BC; /* Tertiary, but still text: it has to clear 4.5:1 on the page, because the small uppercase labels that use it are the hardest type in the app to read, not the least important. */ --text-3: #8A8F99; --text-on-color: #FFFFFF; /* ---- lines ----------------------------------------------------- */ --hairline: rgba(255,255,255,0.07); --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.16); --edge-light: rgba(255,255,255,0.10); --track: rgba(255,255,255,0.10); --track-strong: rgba(255,255,255,0.16); /* The dial's unlit capsule. Its own token because it is the reference a lit capsule is judged against, and it has to hold that job in a theme where the accents themselves are very light. */ --dial-track: rgba(255,255,255,0.11); --dial-track-strong: rgba(255,255,255,0.20); --dial-shadow: rgba(255,255,255,0.05); --dial-shadow-strong: rgba(255,255,255,0.09); --dial-drop: 0 2px 3px rgba(0,0,0,0.30); /* ---- chrome materials ------------------------------------------ */ --mat-island: rgba(20,20,20,0.44); --mat-sheet: rgba(17,17,17,0.74); --mat-panel: rgba(255,255,255,0.045); /* the graphite a content card is made of */ --card-top: #161616; --card-bottom: #0D0D0D; --card-edge: rgba(255,255,255,0.09); --card-sheen: rgba(255,255,255,0.07); --mat-control: rgba(255,255,255,0.06); --mat-control-hi: rgba(255,255,255,0.11); --scrim: rgba(0,0,0,0.5); --blur-island: saturate(190%) blur(38px); --blur-sheet: saturate(175%) blur(40px); --blur-panel: saturate(150%) blur(22px); /* the moving selection is its own pane of glass, sitting on the island */ --blur-pill: saturate(160%) blur(14px); --pill-fill: rgba(255,255,255,0.13); --pill-edge: rgba(255,255,255,0.20); --pill-sheen: rgba(255,255,255,0.34); /* ---- form materials -------------------------------------------- Opaque on purpose. A field or a selected segment must read the same whether or not its backdrop filter composites, so these never depend on what is behind them. */ --field-fill: #171717; --field-fill-hi: #1F1F1F; --field-edge: rgba(255,255,255,0.10); --seg-fill: #333333; --seg-ink: #FFFFFF; --seg-lift: 0 1px 3px rgba(0,0,0,0.4); /* ---- elevation -------------------------------------------------- */ /* Light lift. Dark interfaces get dirty fast with heavy shadow, so these stay soft and low — depth comes from the glass, not from darkness. */ --lift-1: 0 1px 2px rgba(0,0,0,0.10); --lift-2: 0 3px 10px rgba(0,0,0,0.10); --lift-3: 0 10px 26px rgba(0,0,0,0.16); --sheet-lift: 0 -6px 22px rgba(0,0,0,0.20); /* ---- glass: the material every content surface is made of ---- */ --glass-tint: rgba(255,255,255,0.10); --glass-tint-2: rgba(255,255,255,0.045); --glass-edge: rgba(255,255,255,0.16); --glass-sheen: rgba(255,255,255,0.20); --blur-glass: saturate(180%) blur(26px); --glass-colour: 15%; /* how much of the goal's colour the glass carries */ --blur-control: saturate(160%) blur(16px); /* ---- semantic accents ------------------------------------------- */ --accent: #2589E2; --accent-ink: #FFFFFF; --positive: #30D158; --caution: #FF9F0A; --critical: #FF453A; --destructive: #FF453A; /* Reserved. Volt is the product's highest-energy accent and marks exceptional moments only — a personal best, a completed day. It is never the default colour of anything. */ --volt: #D0FF01; /* Volt, moved until it reads on the current surface. Raw Volt is nearly white in luminance, so on a light background it needs the same treatment every accent gets before it may carry meaning. */ --volt-ink: #D0FF01; /* ---- control heights --------------------------------------------- Four sizes, and nothing else. An interface reads as precise when the same handful of measurements repeat; the editor was carrying eight different control heights, which is what made it feel loose. */ --ctl-lg: 56px; /* fields, primary actions */ --ctl-md: 48px; /* secondary actions, day pills, segmented shell */ --ctl-sm: 40px; /* the segment inside a segmented control */ --tap: 44px; /* the minimum target: chips, icon buttons, swatches */ /* ---- geometry ---------------------------------------------------- */ --r-card: 26px; --r-lg: 24px; --r-md: 18px; --r-sm: 14px; --r-xs: 11px; --r-hair: 3px; /* the radius of a bar only a few pixels tall */ --r-pill: 999px; /* ---- spacing ----------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* ---- typography --------------------------------------------------- */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Helvetica Neue", sans-serif; /* The daily line is set apart from the interface. Satoshi if the device has it, then Apple's display face — which is what an iPhone will use. Nothing is bundled: shipping a webfont here would mean redistributing someone else's licence along with it. */ --font-quote: "Satoshi", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif; --t-display: clamp(34px, 9.5vw, 40px); --t-metric: clamp(40px, 12vw, 50px); --t-title: clamp(29px, 8.2vw, 34px); --t-section: 21px; --t-body: 17px; --t-secondary: 15px; --t-meta: 13px; --t-label: 11px; --tt-display: -0.036em; --tt-metric: -0.045em; --tt-title: -0.032em; --tt-section: -0.024em; --tt-body: -0.014em; /* ---- motion -------------------------------------------------------- */ --dur-micro: 170ms; --dur-fast: 240ms; --dur-standard: 320ms; --dur-progress: 520ms; --dur-sheet: 440ms; --settle: cubic-bezier(0.22, 1.00, 0.30, 1); --snap: cubic-bezier(0.32, 1.28, 0.42, 1); --glide: cubic-bezier(0.62, 0.04, 0.20, 1); /* ---- layout --------------------------------------------------------- */ --page-max: 480px; --page-pad: 20px; --island-h: 64px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --island-space: calc(var(--island-h) + var(--safe-bottom) + 40px); } /* ============================================================ GOAL COLOUR A goal's colour is generated at runtime from its family + tone (see js/core/palette.js) and written onto the element as --g1/--g2/--g-surface/--gink. These are only fallbacks for anything rendered before a goal is attached. The application's own UI never uses them: navigation, controls and type stay on the neutral semantic tokens above, so choosing colourful goals never makes the interface colourful. ============================================================ */ :root { --g1: #FF4401; --g2: #D63200; --g-hi: #FF7038; --g-tint: #FF5A1F; --g-icon: #FF7A45; --g-surface: #241009; --g-surface-elevated: #341508; --gink: #000000; --g-progress: #FF7038; --g-muted: rgba(255,68,1,0.16); --g-glow: rgba(255,68,1,0.30); } /* ============================================================ LIGHT — rebuilt systematically. Hierarchy, semantics, geometry and material logic are preserved; only the values change. ============================================================ */ :root[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --bg-raised: #FFFFFF; --surface: #FFFFFF; --surface-2: #F4F4F5; --surface-3: #E5E5E5; /* Mercury */ --text-1: #000000; --text-2: #55585F; --text-3: #696D77; --hairline: #E5E5E5; --border: rgba(0,0,0,0.09); --border-strong: rgba(0,0,0,0.14); --edge-light: rgba(255,255,255,0.9); --track: rgba(0,0,0,0.08); --track-strong: rgba(0,0,0,0.14); --dial-track: #E5E5E5; /* Mercury */ --dial-track-strong: #CDCDCD; --dial-shadow: rgba(0,0,0,0.05); --dial-shadow-strong: rgba(0,0,0,0.08); --dial-drop: 0 1px 2px rgba(0,0,0,0.07); --mat-island: rgba(255,255,255,0.58); --mat-sheet: rgba(252,252,254,0.80); --mat-panel: rgba(255,255,255,0.62); --card-top: #FFFFFF; --card-bottom: #FAFAFA; --card-edge: rgba(0,0,0,0.07); --card-sheen: rgba(255,255,255,0.9); --mat-control: rgba(0,0,0,0.05); --mat-control-hi: rgba(0,0,0,0.09); --scrim: rgba(16,18,26,0.28); --pill-fill: rgba(255,255,255,0.88); --pill-edge: rgba(0,0,0,0.07); --pill-sheen: rgba(255,255,255,0.95); --field-fill: #F2F2F3; --field-fill-hi: #EAEAEC; --field-edge: rgba(0,0,0,0.08); --seg-fill: #FFFFFF; --seg-ink: #000000; --seg-lift: 0 1px 3px rgba(0,0,0,0.10); --lift-1: 0 1px 2px rgba(18,20,32,0.04); --lift-2: 0 2px 8px rgba(18,20,32,0.05); --lift-3: 0 8px 22px rgba(18,20,32,0.08); --sheet-lift: 0 -6px 20px rgba(18,20,32,0.08); --glass-tint: rgba(255,255,255,0.62); --glass-tint-2: rgba(255,255,255,0.42); --glass-edge: rgba(255,255,255,0.85); --glass-sheen: rgba(255,255,255,0.95); --glass-colour: 13%; --blur-control: saturate(160%) blur(16px); --volt-ink: #6F8600; --accent: #1A6EBB; --positive: #248A3D; --caution: #B25000; --critical: #D70015; --destructive: #D70015; --volt: #7A9B00; } /* ============================================================ Reduce Motion — durations collapse so end states still land instantly and legibly rather than being cancelled mid-way. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 1ms; --dur-fast: 1ms; --dur-standard: 1ms; --dur-progress: 1ms; --dur-sheet: 1ms; --settle: linear; --snap: linear; --glide: linear; } } /* ============================================================ Reduce Transparency — chrome becomes opaque, content unchanged. ============================================================ */ @media (prefers-reduced-transparency: reduce) { :root { --mat-island: #111111; --mat-sheet: #111111; --mat-control: #1A1A1A; --mat-control-hi: #242424; --blur-island: none; --blur-sheet: none; /* Glass without transparency is just a panel. It keeps its colour cast, loses its translucency, and the layout does not move. */ --glass-tint: #161616; --glass-tint-2: #0F0F0F; --blur-glass: none; --blur-control: none; } :root[data-theme="light"] { --mat-island: #FFFFFF; --mat-sheet: #FFFFFF; --mat-control: #F0F0F0; --mat-control-hi: #E5E5E5; --glass-tint: #FFFFFF; --glass-tint-2: #FAFAFA; } }