/* ====================================================================== MobileTracking — design tokens Umber palette v5.0.0 GENERATED FROM design/tokens.json — DO NOT EDIT BY HAND. Your changes will be overwritten the next time anyone runs `node design/tools/build.mjs`. Edit the tokens and regenerate. ====================================================================== */ /* --------------------------------------------------------------------------- HOW THEMING WORKS HERE The theme is an attribute on : data-theme="light" | "dark". There is no "system" attribute — "system" is a stored *preference*, resolved to one of the two concrete values before first paint by the inline script in every page head. Keeping the resolution out of CSS means one code path instead of two, and it means a page renders correctly even if the stylesheet is still in flight. The [data-theme="dark"] block below is duplicated inside a prefers-color-scheme media query so that a page which somehow renders before the script runs still lands on the right theme rather than flashing white. --------------------------------------------------------------------------- */ :root, [data-theme='light'] { color-scheme: light; --c-background: #F6F2EA; --c-on-surface: #211B15; --c-surface-variant: #E7DFD2; --c-on-surface-variant: #4E463A; --c-outline: #7C7263; --c-outline-variant: #D8CEBE; --c-inverse-surface: #322B22; --c-inverse-on-surface: #F6F0E7; --c-surface-bright: #FFFEFB; --c-surface-dim: #E5DCCC; --c-surface-container-lowest: #FFFFFF; --c-surface-container-low: #F2ECE1; --c-surface-container: #ECE5D8; --c-surface-container-high: #E6DED0; --c-surface-container-highest: #E0D7C7; --c-primary: #B34E22; --c-on-primary: #FFFFFF; --c-primary-text: #6E3A1E; --c-primary-container: #FFDDC8; --c-on-primary-container: #2A1206; --c-inverse-primary: #FFDCC2; --c-secondary: #3E5C46; --c-on-secondary: #FFFFFF; --c-secondary-container: #D8E6D3; --c-on-secondary-container: #12251A; --c-tertiary: #6E6153; --c-on-tertiary: #FFFFFF; --c-tertiary-container: #E4DBD0; --c-on-tertiary-container: #1B160F; --c-error: #BE0D1C; --c-on-error: #FFFFFF; --c-error-container: #FFDAD6; --c-on-error-container: #410004; --c-surface-tint: #B34E22; --c-scrim: #000000; --c-safe: #00712F; --c-on-safe: #FFFFFF; --c-safe-container: #CDF4DE; --c-on-safe-container: #052F16; --c-caution: #5E4C00; --c-on-caution: #FFFFFF; --c-caution-container: #ECE3BD; --c-on-caution-container: #302705; --c-risk: #7D000F; --c-on-risk: #FFFFFF; --c-risk-container: #FFC2C9; --c-on-risk-container: #550811; --c-critical: #59002F; --c-on-critical: #FFFFFF; --c-critical-container: #FFB2DB; --c-on-critical-container: #51082F; --c-ring-start: #8F3D1A; --c-ring-end: #B5501F; --c-sweep: rgba(179, 78, 34, 0.32); --c-meter-track: #DACEBB; --c-hero-wash-top: rgba(179, 78, 34, 0.07); --c-hero-wash-bottom: rgba(79, 110, 87, 0.06); --c-card: #FFFFFF; --c-raised: #FFFFFF; --c-sunken: #F2ECE1; --c-hover: #F2ECE1; --c-hover-strong: #E6DED0; --c-inset: #E6DED0; --c-pressed: #FFFFFF; --c-surface: #F6F2EA; --c-on-background: #211B15; --shadow-0: none; --shadow-1: 0 1px 2px rgba(18, 21, 31, 0.06), 0 1px 3px rgba(18, 21, 31, 0.05); --shadow-2: 0 2px 6px rgba(18, 21, 31, 0.07), 0 4px 12px rgba(18, 21, 31, 0.05); --shadow-3: 0 6px 16px rgba(18, 21, 31, 0.09), 0 12px 28px rgba(18, 21, 31, 0.06); --shadow-4: 0 12px 32px rgba(18, 21, 31, 0.12), 0 24px 56px rgba(18, 21, 31, 0.08); } [data-theme='dark'] { color-scheme: dark; --c-background: #1F1B18; --c-on-surface: #F0E9E0; --c-surface-variant: #3A332D; --c-on-surface-variant: #A79A8C; --c-outline: #877C6E; --c-outline-variant: #3A332D; --c-inverse-surface: #F0E9E0; --c-inverse-on-surface: #2A2521; --c-surface-bright: #3F3830; --c-surface-dim: #1F1B18; --c-surface-container-lowest: #17130F; --c-surface-container-low: #221E1A; --c-surface-container: #272117; --c-surface-container-high: #332E27; --c-surface-container-highest: #3E372F; --c-primary: #FFDCC2; --c-on-primary: #47210E; --c-primary-text: #FFDCC2; --c-primary-container: #6E3A1E; --c-on-primary-container: #FFDDC8; --c-inverse-primary: #B34E22; --c-secondary: #8FA98C; --c-on-secondary: #22392A; --c-secondary-container: #3E5C46; --c-on-secondary-container: #D8E6D3; --c-tertiary: #A79A8C; --c-on-tertiary: #33291F; --c-tertiary-container: #5A4E42; --c-on-tertiary-container: #E4DBD0; --c-error: #FFB4AB; --c-on-error: #690007; --c-error-container: #93000E; --c-on-error-container: #FFDAD6; --c-surface-tint: #FFDCC2; --c-scrim: #000000; --c-safe: #009E42; --c-on-safe: #041B0A; --c-safe-container: #173925; --c-on-safe-container: #AEEAC7; --c-caution: #C29C00; --c-on-caution: #1B1705; --c-caution-container: #433B1A; --c-on-caution-container: #EADDAD; --c-risk: #FF9CA7; --c-on-risk: #33080D; --c-risk-container: #772B34; --c-on-risk-container: #FFBDC4; --c-critical: #FFBEE1; --c-on-critical: #31071D; --c-critical-container: #842D5B; --c-on-critical-container: #FFBDE0; --c-ring-start: #D98A5C; --c-ring-end: #FFDCC2; --c-sweep: rgba(255, 220, 194, 0.30); --c-meter-track: #38342D; --c-hero-wash-top: rgba(217, 138, 92, 0.12); --c-hero-wash-bottom: rgba(143, 169, 140, 0.07); --c-card: #221E1A; --c-raised: #272117; --c-sunken: #272117; --c-hover: #272117; --c-hover-strong: #332E27; --c-inset: #332E27; --c-pressed: #3E372F; --c-surface: #1F1B18; --c-on-background: #F0E9E0; --shadow-0: none; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.45); --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.6), 0 16px 36px rgba(0, 0, 0, 0.5); --shadow-4: 0 14px 40px rgba(0, 0, 0, 0.68), 0 28px 72px rgba(0, 0, 0, 0.55); } /* The no-JS / pre-script fallback. Only applies when nothing has set an explicit theme, so an explicit choice always wins over the OS setting. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --c-background: #1F1B18; --c-on-surface: #F0E9E0; --c-surface-variant: #3A332D; --c-on-surface-variant: #A79A8C; --c-outline: #877C6E; --c-outline-variant: #3A332D; --c-inverse-surface: #F0E9E0; --c-inverse-on-surface: #2A2521; --c-surface-bright: #3F3830; --c-surface-dim: #1F1B18; --c-surface-container-lowest: #17130F; --c-surface-container-low: #221E1A; --c-surface-container: #272117; --c-surface-container-high: #332E27; --c-surface-container-highest: #3E372F; --c-primary: #FFDCC2; --c-on-primary: #47210E; --c-primary-text: #FFDCC2; --c-primary-container: #6E3A1E; --c-on-primary-container: #FFDDC8; --c-inverse-primary: #B34E22; --c-secondary: #8FA98C; --c-on-secondary: #22392A; --c-secondary-container: #3E5C46; --c-on-secondary-container: #D8E6D3; --c-tertiary: #A79A8C; --c-on-tertiary: #33291F; --c-tertiary-container: #5A4E42; --c-on-tertiary-container: #E4DBD0; --c-error: #FFB4AB; --c-on-error: #690007; --c-error-container: #93000E; --c-on-error-container: #FFDAD6; --c-surface-tint: #FFDCC2; --c-scrim: #000000; --c-safe: #009E42; --c-on-safe: #041B0A; --c-safe-container: #173925; --c-on-safe-container: #AEEAC7; --c-caution: #C29C00; --c-on-caution: #1B1705; --c-caution-container: #433B1A; --c-on-caution-container: #EADDAD; --c-risk: #FF9CA7; --c-on-risk: #33080D; --c-risk-container: #772B34; --c-on-risk-container: #FFBDC4; --c-critical: #FFBEE1; --c-on-critical: #31071D; --c-critical-container: #842D5B; --c-on-critical-container: #FFBDE0; --c-ring-start: #D98A5C; --c-ring-end: #FFDCC2; --c-sweep: rgba(255, 220, 194, 0.30); --c-meter-track: #38342D; --c-hero-wash-top: rgba(217, 138, 92, 0.12); --c-hero-wash-bottom: rgba(143, 169, 140, 0.07); --c-card: #221E1A; --c-raised: #272117; --c-sunken: #272117; --c-hover: #272117; --c-hover-strong: #332E27; --c-inset: #332E27; --c-pressed: #3E372F; --c-surface: #1F1B18; --c-on-background: #F0E9E0; --shadow-0: none; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.45); --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.6), 0 16px 36px rgba(0, 0, 0, 0.5); --shadow-4: 0 14px 40px rgba(0, 0, 0, 0.68), 0 28px 72px rgba(0, 0, 0, 0.55); } } :root { /* ---- shape ---- */ --r-xs: 8px; --r-sm: 12px; --r-md: 20px; --r-lg: 26px; --r-xl: 32px; --r-hero: 28px; --r-pill: 999px; /* ---- space ---- */ --s-hair: 2px; --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 24px; --s-2xl: 32px; --s-3xl: 48px; --s-gutter: 24px; --s-rail: 236px; /* ---- type ---- */ --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --t-display-lg-size: 56px; --t-display-lg-line: 60px; --t-display-lg-weight: 700; --t-display-lg-track: -0.025em; --t-display-md-size: 44px; --t-display-md-line: 50px; --t-display-md-weight: 700; --t-display-md-track: -0.022em; --t-display-sm-size: 35px; --t-display-sm-line: 42px; --t-display-sm-weight: 600; --t-display-sm-track: -0.015em; --t-headline-lg-size: 29px; --t-headline-lg-line: 38px; --t-headline-lg-weight: 700; --t-headline-lg-track: -0.012em; --t-headline-md-size: 24px; --t-headline-md-line: 32px; --t-headline-md-weight: 700; --t-headline-md-track: -0.008em; --t-headline-sm-size: 20px; --t-headline-sm-line: 28px; --t-headline-sm-weight: 600; --t-headline-sm-track: -0.004em; --t-title-lg-size: 19px; --t-title-lg-line: 26px; --t-title-lg-weight: 600; --t-title-lg-track: 0; --t-title-md-size: 16px; --t-title-md-line: 22px; --t-title-md-weight: 600; --t-title-md-track: 0.005em; --t-title-sm-size: 14px; --t-title-sm-line: 20px; --t-title-sm-weight: 600; --t-title-sm-track: 0.007em; --t-body-lg-size: 16px; --t-body-lg-line: 24px; --t-body-lg-weight: 400; --t-body-lg-track: 0.009em; --t-body-md-size: 14px; --t-body-md-line: 21px; --t-body-md-weight: 400; --t-body-md-track: 0.012em; --t-body-sm-size: 12.5px; --t-body-sm-line: 18px; --t-body-sm-weight: 400; --t-body-sm-track: 0.02em; --t-label-lg-size: 14px; --t-label-lg-line: 20px; --t-label-lg-weight: 600; --t-label-lg-track: 0.007em; --t-label-md-size: 12px; --t-label-md-line: 16px; --t-label-md-weight: 500; --t-label-md-track: 0.03em; --t-label-sm-size: 11px; --t-label-sm-line: 15px; --t-label-sm-weight: 500; --t-label-sm-track: 0.04em; /* ---- motion ---- */ --m-instant: 90ms; --m-fast: 150ms; --m-base: 220ms; --m-slow: 320ms; --m-easeOut: cubic-bezier(0.2, 0, 0, 1); --m-easeInOut: cubic-bezier(0.4, 0, 0.2, 1); --m-spring: cubic-bezier(0.34, 1.4, 0.64, 1); } /* Anyone who has asked their OS to stop animating things means it. This is a single override rather than a per-component concern precisely so that a new component cannot forget to honour it. */ @media (prefers-reduced-motion: reduce) { :root { --m-instant: 0ms; --m-fast: 0ms; --m-base: 0ms; --m-slow: 0ms; } }