/* --------------------------------------------------------------------------- tokens.css — the ONLY place a design token is declared. No other stylesheet may introduce a custom property; they consume these. Two axes on : data-theme = "studio" | "brutal" the personality data-mode = "light" | "dark" the ground which gives four modes. Plus data-accent (six hues) and data-motion="reduced". Why two themes and not a slider: the reference kit ships a soft "modern" face and a hard "neobrutal" one, and the two disagree about more than colour — radius, border weight and shadow all flip. Keeping them as one attribute means a component never has to know which face it is wearing. --------------------------------------------------------------------------- */ :root { /* ---- type ------------------------------------------------------------- */ /* No webfont on purpose: this page ships with no binary asset, and the platform UI stack is what makes it read as a native app rather than a web page pretending to be one. */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --font-num: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace; --fs-2xs: 0.6875rem; /* 11 */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-md: 0.9375rem; /* 15 — body */ --fs-lg: 1.0625rem; /* 17 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 1.875rem; /* 30 */ /* The countdown is the one piece of type that must own the screen on a 360px phone and still not overflow a 1440px desktop. */ --fs-timer: clamp(2.75rem, 15vw, 4.25rem); --fs-timer-full: clamp(3.5rem, 22vw, 8rem); --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.5; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.09em; /* ---- space (4px base) ------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-7: 2rem; /* 32 */ --sp-8: 2.5rem; /* 40 */ --sp-9: 3rem; /* 48 */ --gutter: var(--sp-4); --page-max: 34rem; /* the phone column; the desktop centres it */ --page-max-wide: 60rem; /* reports and calendar may use two columns */ /* ---- shape ------------------------------------------------------------ */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --r-card: var(--r-lg); --r-btn: var(--r-pill); --r-field: var(--r-md); --r-sheet: var(--r-xl); --bw: 1px; /* ---- motion ----------------------------------------------------------- */ --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 520ms; --d-5: 900ms; --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-in: cubic-bezier(0.55, 0, 1, 0.45); --e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- layers ----------------------------------------------------------- */ --z-base: 0; --z-raised: 5; --z-sticky: 10; --z-header: 20; --z-nav: 30; /* Nothing reads these two: the sheet and the modal are real s and the top layer stacks them above every z-index on the page. They stay as the documented rung for anything that ever has to sit beside one. */ --z-sheet: 40; --z-modal: 50; --z-toast: 60; --z-fx: 70; /* ---- safe area -------------------------------------------------------- */ /* env() is 0 everywhere but a notched phone; the max() keeps the tab bar off the home indicator without pushing it up on a desktop. */ --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); /* ---- fixed chrome metrics --------------------------------------------- */ --header-h: 56px; --nav-h: 60px; --tap: 44px; /* minimum touch target */ --nav-total: calc(var(--nav-h) + var(--sa-b)); } /* ========================================================================= ACCENT HUES — one attribute, six identities. Each defines the raw hue only; the theme blocks below decide how much of it survives on light vs dark. ========================================================================= */ :root, :root[data-accent="tomato"] { --hue-accent: #ef3b34; --hue-accent-deep: #c81f1c; --hue-accent-lift: #ff6a63; } :root[data-accent="ember"] { --hue-accent: #d65218; --hue-accent-deep: #a83c0d; --hue-accent-lift: #f4813f; } :root[data-accent="orchid"] { --hue-accent: #a4729e; --hue-accent-deep: #7d5078; --hue-accent-lift: #c396bd; } :root[data-accent="sage"] { --hue-accent: #3f8f6b; --hue-accent-deep: #2c6a4e; --hue-accent-lift: #63b48e; } :root[data-accent="ocean"] { --hue-accent: #2f6be0; --hue-accent-deep: #204fae; --hue-accent-lift: #5d92f2; } :root[data-accent="ink"] { --hue-accent: #3a3436; --hue-accent-deep: #16110f; --hue-accent-lift: #6b6265; } /* ========================================================================= THEME: STUDIO — soft paper, generous radius, diffuse shadow. Light is the default so a stylesheet that never matches still looks right. ========================================================================= */ :root, :root[data-theme="studio"] { --c-bg: #f4f2f1; --c-surface: #ffffff; --c-surface-2: #faf8f8; --c-surface-sunken: #eeeaea; --c-ink: #16110f; --c-ink-2: #565455; --c-ink-3: #8d8385; --c-ink-inv: #ffffff; --c-line: #e8e3e2; --c-line-strong: #d6cfce; --c-accent: var(--hue-accent); --c-accent-deep: var(--hue-accent-deep); --c-accent-lift: var(--hue-accent-lift); --c-accent-ink: #ffffff; --c-accent-soft: color-mix(in srgb, var(--hue-accent) 12%, #ffffff); --c-accent-softer: color-mix(in srgb, var(--hue-accent) 6%, #ffffff); --c-accent-line: color-mix(in srgb, var(--hue-accent) 28%, #ffffff); /* Session kinds get their own colour so a chart never needs the accent to mean two things at once. */ --c-focus: var(--hue-accent); --c-break: #3f8f6b; --c-long: #2f6be0; --c-ok: #2f8f5b; --c-warn: #c98212; --c-danger: #d63a3a; --c-info: #2f6be0; --c-ok-soft: color-mix(in srgb, #2f8f5b 12%, #ffffff); --c-warn-soft: color-mix(in srgb, #c98212 14%, #ffffff); --c-danger-soft: color-mix(in srgb, #d63a3a 12%, #ffffff); --c-track: #e9e4e3; --c-scrim: rgba(20, 15, 17, 0.44); --c-ring: color-mix(in srgb, var(--hue-accent) 70%, #000000); --sh-1: 0 1px 2px rgba(20, 15, 17, 0.06); --sh-2: 0 2px 8px rgba(20, 15, 17, 0.07), 0 1px 2px rgba(20, 15, 17, 0.05); --sh-3: 0 10px 28px rgba(20, 15, 17, 0.11), 0 2px 6px rgba(20, 15, 17, 0.05); --sh-4: 0 22px 60px rgba(20, 15, 17, 0.18); --sh-card: var(--sh-2); --sh-pop: var(--sh-3); --sh-accent: 0 8px 22px color-mix(in srgb, var(--hue-accent) 34%, transparent); --sh-press: none; --btn-translate: 0px; --card-border: var(--bw) solid var(--c-line); --field-border: var(--bw) solid var(--c-line-strong); --caps-transform: none; } :root[data-theme="studio"][data-mode="dark"], :root[data-mode="dark"] { --c-bg: #131011; --c-surface: #1d1819; --c-surface-2: #241f20; --c-surface-sunken: #100d0e; --c-ink: #f6f2f1; --c-ink-2: #b6acae; --c-ink-3: #837a7c; --c-ink-inv: #16110f; --c-line: #2b2526; --c-line-strong: #3b3436; --c-accent: var(--hue-accent-lift); --c-accent-deep: var(--hue-accent); --c-accent-lift: color-mix(in srgb, var(--hue-accent-lift) 70%, #ffffff); --c-accent-ink: #14100f; --c-accent-soft: color-mix(in srgb, var(--hue-accent) 22%, #1d1819); --c-accent-softer: color-mix(in srgb, var(--hue-accent) 11%, #1d1819); --c-accent-line: color-mix(in srgb, var(--hue-accent) 40%, #1d1819); --c-focus: var(--hue-accent-lift); --c-break: #58b98d; --c-long: #6d9cf5; --c-ok: #58b98d; --c-warn: #e0a63f; --c-danger: #f0625f; --c-info: #6d9cf5; --c-ok-soft: color-mix(in srgb, #58b98d 18%, #1d1819); --c-warn-soft: color-mix(in srgb, #e0a63f 18%, #1d1819); --c-danger-soft: color-mix(in srgb, #f0625f 18%, #1d1819); --c-track: #2c2627; --c-scrim: rgba(0, 0, 0, 0.62); --c-ring: color-mix(in srgb, var(--hue-accent-lift) 80%, #ffffff); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5); --sh-2: 0 2px 10px rgba(0, 0, 0, 0.45); --sh-3: 0 12px 32px rgba(0, 0, 0, 0.55); --sh-4: 0 24px 64px rgba(0, 0, 0, 0.65); --sh-card: var(--sh-1); --sh-pop: var(--sh-3); --sh-accent: 0 8px 24px color-mix(in srgb, var(--hue-accent) 40%, transparent); } /* ========================================================================= THEME: BRUTAL — flat ink, square corners, 2px outline, hard offset shadow. Everything a component needs is expressed through the same names, so no component stylesheet has to branch on the theme. ========================================================================= */ :root[data-theme="brutal"] { --bw: 2px; --r-xs: 0px; --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 6px; --r-pill: 4px; --r-card: 4px; --r-btn: 4px; --r-field: 3px; --r-sheet: 6px; --c-bg: #f7f4ec; --c-surface: #ffffff; --c-surface-2: #fbf8f1; --c-surface-sunken: #ece7db; --c-ink: #0b0b0b; --c-ink-2: #3d3a3a; --c-ink-3: #6b6664; --c-ink-inv: #ffffff; --c-line: #0b0b0b; --c-line-strong: #0b0b0b; --c-accent: var(--hue-accent); --c-accent-deep: var(--hue-accent-deep); --c-accent-lift: var(--hue-accent-lift); --c-accent-ink: #ffffff; --c-accent-soft: color-mix(in srgb, var(--hue-accent) 20%, #ffffff); --c-accent-softer: color-mix(in srgb, var(--hue-accent) 10%, #ffffff); --c-accent-line: #0b0b0b; --c-focus: var(--hue-accent); --c-break: #1f7a4d; --c-long: #1d4fd0; --c-ok: #1f7a4d; --c-warn: #b26a00; --c-danger: #cc1f1f; --c-info: #1d4fd0; --c-ok-soft: #d8f0e2; --c-warn-soft: #fbeccd; --c-danger-soft: #fadada; --c-track: #e4dfd2; --c-scrim: rgba(11, 11, 11, 0.5); --c-ring: #0b0b0b; /* Hard shadows: the whole point of the face. */ --sh-1: 2px 2px 0 var(--c-ink); --sh-2: 3px 3px 0 var(--c-ink); --sh-3: 5px 5px 0 var(--c-ink); --sh-4: 8px 8px 0 var(--c-ink); --sh-card: var(--sh-2); --sh-pop: var(--sh-3); --sh-accent: 3px 3px 0 var(--c-ink); --sh-press: 1px 1px 0 var(--c-ink); --btn-translate: 2px; /* pressed buttons fall into their shadow */ --card-border: var(--bw) solid var(--c-ink); --field-border: var(--bw) solid var(--c-ink); --caps-transform: uppercase; --ls-caps: 0.06em; --fw-semibold: 700; --fw-bold: 800; } :root[data-theme="brutal"][data-mode="dark"] { --c-bg: #0c0c0c; --c-surface: #191919; --c-surface-2: #212121; --c-surface-sunken: #060606; --c-ink: #f8f5ee; --c-ink-2: #c2bdb4; --c-ink-3: #8e8983; --c-ink-inv: #0c0c0c; --c-line: #f8f5ee; --c-line-strong: #f8f5ee; --c-accent: var(--hue-accent-lift); --c-accent-deep: var(--hue-accent); --c-accent-ink: #0c0c0c; --c-accent-soft: color-mix(in srgb, var(--hue-accent) 30%, #191919); --c-accent-softer: color-mix(in srgb, var(--hue-accent) 15%, #191919); --c-accent-line: #f8f5ee; --c-focus: var(--hue-accent-lift); --c-break: #4fd39a; --c-long: #7aa5ff; --c-ok: #4fd39a; --c-warn: #f0b64a; --c-danger: #ff6b66; --c-info: #7aa5ff; --c-ok-soft: #17301f; --c-warn-soft: #33280f; --c-danger-soft: #331616; --c-track: #2a2a2a; --c-scrim: rgba(0, 0, 0, 0.7); --c-ring: #f8f5ee; } /* The mode toggle also drives the UA's own widgets (scrollbars, form controls); without it a dark page gets a white scrollbar gutter. */ :root { color-scheme: light; } :root[data-mode="dark"] { color-scheme: dark; }