/* Generated from materials/design/kepsle-app-product-design/tokens/kepsle.tokens.json. Do not hand-edit token values here; update the canonical token source and run: node scripts/kepsle-token-build.mjs */ /* Geist is bundled under the SIL Open Font License 1.1; see ./fonts/LICENSE.txt. */ @font-face { font-family: "Geist Sans"; src: url("./fonts/Geist-Variable.woff2") format("woff2-variations"); font-style: normal; font-weight: 100 900; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("./fonts/GeistMono-Variable.woff2") format("woff2-variations"); font-style: normal; font-weight: 100 900; font-display: swap; } html { font-synthesis: none; } :where(h1, h2, h3, h4, h5, h6, b, strong) { font-weight: var(--ks-typography-weight-strong); } :root { color-scheme: light; /* Public typography contract: narrative Sans and evidence Mono. */ --ks-font-narrative: "Geist Sans", "PingFang SC", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif; --ks-font-evidence: "Geist Mono", SFMono-Regular, "Roboto Mono", Menlo, "PingFang SC", monospace; --ks-typography-weight-body: 400; --ks-typography-weight-label: 450; --ks-typography-weight-heading: 500; --ks-typography-weight-strong: 500; --ks-typography-weight-action: 500; --ks-typography-weight-data: 500; --ks-typography-size-mini: 11px; --ks-typography-size-label: 12px; --ks-typography-size-card: 14px; --ks-typography-size-body: 16px; --ks-typography-size-sheet-title: 27px; --ks-typography-size-phone-title: 30px; --ks-typography-size-heading: 32px; --ks-typography-leading-tight: 1.02; --ks-typography-leading-data: 1.2; --ks-typography-leading-label: 1.3; --ks-typography-leading-copy: 1.58; --ks-typography-tracking-default: 0px; --ks-typography-tracking-system: 0.4px; --ks-typography-tracking-heading: -0.8px; --ks-color-transparent: #00000000; /* Public color contract: consume semantic roles; foundation swatches are internal. */ --ks-color-background-canvas: #FFFFFF; --ks-color-background-subtle: #F6F7F8; --ks-color-surface-card: #FFFFFF; --ks-color-border-subtle: #0F171F17; --ks-color-border-control: #A6B0B9; --ks-color-text-primary: #1C232B; --ks-color-text-secondary: #5F6B76; --ks-color-action-primary-surface: #1B788B; --ks-color-action-primary-content: #FFFFFF; --ks-color-action-subtle-surface: #DDF3F6; --ks-color-accent-connect: #5E6EAE; --ks-color-accent-clay: #C98956; --ks-color-accent-clay-text: color-mix(in srgb, var(--ks-color-accent-clay) 62%, var(--ks-color-text-primary)); --ks-color-status-sage-surface: #E6F1EA; --ks-color-status-sage-content: #143128; --ks-color-status-warm-surface: #FFF2D9; --ks-color-status-warm-content: #352D1F; --ks-color-record-confirmed-fill: #352D1FAD; --ks-color-record-draft-fill: #352D1F6B; --ks-color-record-draft-border: #352D1F94; --ks-color-record-projected-marker: #1B788B; --ks-color-scene-night-surface: #142341; --ks-color-scene-night-content: #FAF4E6; --ks-color-website-background-canvas: #FFFFFF; --ks-color-website-background-soft: #FBFAF9; --ks-color-website-background-subtle: #F6F7F8; --ks-color-website-scene-night-soft: #1D3054; --ks-color-website-border-subtle: #0F171F1A; --ks-color-website-border-on-night: #FFFFFF33; --ks-color-website-text-editorial: #765841; --ks-color-website-accent-sage: #74897C; --ks-color-website-accent-star: #FFF3CC; --ks-color-website-status-ok: #3F6B54; --ks-color-website-illustration-sage-role: #8FAA70; --ks-color-website-illustration-slate-role: #6F8FA6; --ks-color-website-illustration-clay-role: #C98956; --ks-color-website-illustration-mist-role: #C9CFDC; --ks-color-website-device-bezel: #1D1F24; --ks-color-data-food-carb: #72AEC4; --ks-color-data-food-protein: #C98956; --ks-color-data-food-fat: #8FAA70; --ks-color-data-food-ink: #302820; --ks-color-data-food-muted: #7F7467; --ks-color-data-food-surface: #FFFAF0; --ks-color-data-food-track: #EBE1D2; --ks-color-data-food-ring: #6F8FA6; --ks-color-data-sleep-deep: #46608C; --ks-color-data-sleep-restful: #7FA08F; --ks-color-data-sleep-light: #DCE5E1; --ks-color-data-movement-recent: #6F8FA6; --ks-color-data-movement-prior: #C9CFDC; --ks-color-data-movement-rest: #F6F7F8; --ks-color-identity-module-iris: #6659A6; --ks-color-identity-module-rosewood: #A9606A; --ks-color-identity-module-plum: #6F345F; --ks-color-identity-module-celadon: #3D7152; --ks-color-identity-module-brass: #766E4C; --ks-color-identity-module-aubergine: #332447; /* Public dimension contract: shared scales and roles; foundation values are internal. */ --ks-space-1: 4px; --space-1: var(--ks-space-1); --ks-space-2: 8px; --space-2: var(--ks-space-2); --ks-space-3: 12px; --space-3: var(--ks-space-3); --ks-space-4: 16px; --space-4: var(--ks-space-4); --ks-space-5: 20px; --space-5: var(--ks-space-5); --ks-space-6: 24px; --space-6: var(--ks-space-6); --ks-space-8: 32px; --space-8: var(--ks-space-8); --ks-space-10: 40px; --space-10: var(--ks-space-10); --ks-space-12: 48px; --space-12: var(--ks-space-12); --ks-space-16: 64px; --space-16: var(--ks-space-16); --ks-space-20: 80px; --space-20: var(--ks-space-20); --ks-radius-control: 6px; --radius-control: var(--ks-radius-control); --ks-radius-card: 8px; --radius-card: var(--ks-radius-card); --ks-radius-sheet: 16px; --radius-sheet: var(--ks-radius-sheet); --ks-radius-phone: 32px; --radius-phone: var(--ks-radius-phone); --ks-radius-pill: 999px; --radius-pill: var(--ks-radius-pill); --ks-phone-width: 390px; --ks-phone-height: 844px; /* Public motion-duration contract: select timing by interaction job. */ --ks-motion-fast: 150ms; --ks-motion-exit: 180ms; --ks-motion-sheet: 220ms; --ks-motion-page: 520ms; --ks-motion-website-entrance: 560ms; --ks-motion-website-reveal: 300ms; --ks-motion-tap-indicator: 450ms; --ks-motion-companion-handoff: 560ms; --ks-motion-companion-breath: 4000ms; /* Public elevation contract: choose by layer job, not visual drama. */ --ks-shadow-none: none; --ks-shadow-page: 0 24px 56px rgba(16,20,32,0.20); --shadow-page: var(--ks-shadow-page); --ks-shadow-card: 0 8px 20px rgba(21,38,54,0.06); --shadow-card: var(--ks-shadow-card); --ks-shadow-control: 0 14px 30px rgba(21,38,54,0.18); --shadow-control: var(--ks-shadow-control); --ks-shadow-sheet: 0 -18px 42px rgba(16,20,32,0.24); --shadow-sheet: var(--ks-shadow-sheet); --ks-shadow-website-float: 0 30px 60px -20px rgba(16,20,32,0.18); --ks-shadow-website-card: 0 1px 2px rgba(16,20,32,0.04); /* Cairn Design Tokens v2: Quartz Tide semantic roles from Token System.dc.html. */ --bg-canvas: var(--ks-color-background-canvas); --bg-subtle: var(--ks-color-background-subtle); --surface-card: var(--ks-color-surface-card); --line-soft: var(--ks-color-border-subtle); --ks-color-line-soft: var(--line-soft); --line-control: var(--ks-color-border-control); --text-primary: var(--ks-color-text-primary); --text-secondary: var(--ks-color-text-secondary); --action-fill: var(--ks-color-action-primary-surface); --action-on: var(--ks-color-action-primary-content); --action-subtle: var(--ks-color-action-subtle-surface); --connect-accent: var(--ks-color-accent-connect); --status-sage: var(--ks-color-status-sage-surface); --status-warm: var(--ks-color-status-warm-surface); --night-bg: var(--ks-color-scene-night-surface); --night-on: var(--ks-color-scene-night-content); --status-sage-strong: var(--ks-color-status-sage-content); --status-warm-strong: var(--ks-color-status-warm-content); /* Website shell colors (flat near-white since 2026-07-10). Product-demo phones keep the Scheme C app palette. */ --ks-color-website-paper: var(--ks-color-website-background-canvas); --ks-color-website-paper-soft: var(--ks-color-website-background-soft); --ks-color-website-paper-deep: var(--ks-color-website-background-subtle); --ks-color-website-night-soft: var(--ks-color-website-scene-night-soft); --ks-color-website-line: var(--ks-color-website-border-subtle); --ks-color-website-line-light: var(--ks-color-website-border-on-night); --ks-color-website-ochre-text: var(--ks-color-website-text-editorial); --ks-color-website-sage: var(--ks-color-website-accent-sage); --ks-color-website-star: var(--ks-color-website-accent-star); --ks-color-website-ok: var(--ks-color-website-status-ok); --ks-color-website-illustration-sage: var(--ks-color-website-illustration-sage-role); --ks-color-website-illustration-slate: var(--ks-color-website-illustration-slate-role); --ks-color-website-illustration-clay: var(--ks-color-website-illustration-clay-role); --ks-color-website-illustration-mist: var(--ks-color-website-illustration-mist-role); --ks-color-website-bezel: var(--ks-color-website-device-bezel); /* Compatibility shims for older Kepsle specimens. Prefer the v2 semantic roles above for new work. */ --ks-color-sand: var(--ks-color-background-subtle); --ks-color-paper: var(--ks-color-background-canvas); --ks-color-paper-warm: var(--ks-color-surface-card); --ks-color-paper-deep: color-mix(in srgb, var(--ks-color-background-subtle) 72%, var(--ks-color-border-subtle) 28%); --ks-color-ochre: var(--ks-color-accent-clay); --ks-color-ochre-text: var(--ks-color-accent-clay-text); --ks-color-clay: var(--ks-color-accent-clay); /* Nutrition macro palette for the calories screen and food vignettes. */ --ks-color-food-carb: var(--ks-color-data-food-carb); --ks-color-food-protein: var(--ks-color-data-food-protein); --ks-color-food-fat: var(--ks-color-data-food-fat); --ks-color-food-ink: var(--ks-color-data-food-ink); --ks-color-food-muted: var(--ks-color-data-food-muted); --ks-color-food-cream: var(--ks-color-data-food-surface); --ks-color-food-track: var(--ks-color-data-food-track); --ks-color-food-ring: var(--ks-color-data-food-ring); /* Sleep stage composition data literals, parallel to the food family: fixed regardless of theme (recorded data never recolors), aesthetic-only (G2), lightness-ordered deep < restful < light. */ --ks-color-sleep-deep: var(--ks-color-data-sleep-deep); --ks-color-sleep-restful: var(--ks-color-data-sleep-restful); --ks-color-sleep-light: var(--ks-color-data-sleep-light); /* Compatibility alias. Use component.card.detail.connection.moduleInk.nutrition for the mapped Detail connection role. */ --ks-color-module-iris: var(--ks-color-identity-module-iris); --ks-color-module-rosewood: var(--ks-color-identity-module-rosewood); --ks-color-module-plum: var(--ks-color-identity-module-plum); --ks-color-module-celadon: var(--ks-color-identity-module-celadon); --ks-color-module-brass: var(--ks-color-identity-module-brass); --ks-color-module-aubergine: var(--ks-color-identity-module-aubergine); --ks-color-green: var(--ks-color-status-sage-content); --ks-color-bluegray: var(--ks-color-border-control); --ks-color-indigo: var(--ks-color-action-primary-surface); --ks-color-indigo-2: var(--ks-color-accent-connect); --ks-color-indigo-3: color-mix(in srgb, var(--ks-color-action-primary-surface) 72%, var(--ks-color-scene-night-surface) 28%); --ks-color-indigo-deep: var(--ks-color-scene-night-surface); --ks-color-ink: var(--ks-color-text-primary); --ks-color-muted: var(--ks-color-text-secondary); --ks-color-line: color-mix(in srgb, var(--ks-color-border-control) 42%, transparent); --ks-color-paper-line: color-mix(in srgb, var(--ks-color-scene-night-content) 24%, transparent); --ks-color-on-dark: var(--ks-color-scene-night-content); --ks-color-on-dark-soft: color-mix(in srgb, var(--ks-color-scene-night-content) 82%, transparent); --ks-color-on-dark-muted: color-mix(in srgb, var(--ks-color-scene-night-content) 68%, transparent); --ks-color-on-dark-line: color-mix(in srgb, var(--ks-color-scene-night-content) 20%, transparent); /* Semantic compatibility aliases. Prefer role names such as action-fill and connect-accent in new specimens. */ --ks-color-primary: var(--ks-color-action-primary-surface); --ks-color-secondary: var(--ks-color-status-warm-content); --ks-color-tertiary: var(--ks-color-status-sage-content); /* Speculative vs confirmed state colors. Shared by nutrition rail, draft meal rows, and draft-then-confirm surfaces. */ --ks-color-state-eaten: var(--ks-color-record-confirmed-fill); --ks-color-state-draft: var(--ks-color-record-draft-fill); --ks-color-state-draft-line: var(--ks-color-record-draft-border); --ks-color-state-landing: var(--ks-color-record-projected-marker); /* Texture source: ambientCG Travertine009, CC0. Used as a low-strength limestone-family material mask. */ --ks-material-limestone-mask: url("assets/limestone-travertine-009-mask.jpg"); --ks-material-limestone-blend: soft-light; --ks-material-limestone-edge: repeating-linear-gradient(92deg, rgba(32, 28, 24, 0.12) 0 1px, transparent 1px 7px); --ks-material-phone-surface-image: repeating-linear-gradient(7deg, rgba(32, 28, 24, 0.010) 0, rgba(32, 28, 24, 0.010) 1px, transparent 1px, transparent 6px); --ks-material-phone-surface-size: 520px 520px, auto; --ks-material-phone-surface-position: 50% 48%, 0 0; --ks-material-phone-surface-filter: grayscale(1) contrast(0.42) brightness(1.14) blur(0.18px); --ks-material-phone-surface-opacity: 0.18; --ks-material-phone-surface-blend: soft-light; --ks-material-title-size: 680px 680px; --ks-material-title-filter: grayscale(1) contrast(0.46) brightness(1.1) blur(0.25px); --ks-material-title-opacity: 0.18; --ks-material-swatch-size: 280px 280px; --ks-material-swatch-filter: grayscale(1) contrast(0.5) brightness(1.08) blur(0.2px); --ks-material-swatch-opacity: 0.24; --ks-material-control-size: 240px 240px; --ks-material-control-filter: grayscale(1) contrast(0.52) brightness(1.08) blur(0.16px); --ks-material-control-opacity: 0.16; --ks-material-control-strong-opacity: 0.22; --ks-mineral-mesh-wash: radial-gradient(90% 40% at 94% -8%, color-mix(in srgb, var(--ks-color-accent-clay) 14%, transparent), transparent 72%), radial-gradient(90% 40% at 8% -6%, color-mix(in srgb, var(--ks-color-action-primary-surface) 11%, transparent), transparent 72%), radial-gradient(150% 34% at 55% -12%, color-mix(in srgb, var(--ks-color-status-warm-surface) 70%, transparent), transparent 75%), radial-gradient(140% 34% at 50% 108%, var(--ks-color-status-sage-surface), transparent 78%); --ks-material-mesh-canvas-edge-pools: radial-gradient(110% 30% at 80% -8%, color-mix(in srgb, var(--ks-color-status-warm-surface) 88%, var(--ks-color-background-canvas)) 0%, color-mix(in srgb, var(--ks-color-status-warm-surface) 44%, transparent) 42%, transparent 76%), radial-gradient(88% 26% at -8% -2%, color-mix(in srgb, var(--ks-color-action-subtle-surface) 74%, var(--ks-color-background-canvas)) 0%, color-mix(in srgb, var(--ks-color-action-subtle-surface) 34%, transparent) 44%, transparent 78%), radial-gradient(96% 26% at 112% 34%, color-mix(in srgb, var(--ks-color-status-sage-surface) 62%, var(--ks-color-background-canvas)) 0%, color-mix(in srgb, var(--ks-color-status-sage-surface) 26%, transparent) 46%, transparent 76%), radial-gradient(100% 26% at -14% 56%, color-mix(in srgb, var(--ks-color-status-warm-surface) 54%, var(--ks-color-background-canvas)) 0%, color-mix(in srgb, var(--ks-color-status-warm-surface) 22%, transparent) 46%, transparent 76%), radial-gradient(104% 28% at 90% 84%, color-mix(in srgb, var(--ks-color-action-subtle-surface) 56%, var(--ks-color-background-canvas)) 0%, color-mix(in srgb, var(--ks-color-action-subtle-surface) 22%, transparent) 46%, transparent 78%), radial-gradient(92% 24% at 6% 108%, color-mix(in srgb, var(--ks-color-status-sage-surface) 56%, var(--ks-color-background-canvas)) 0%, color-mix(in srgb, var(--ks-color-status-sage-surface) 22%, transparent) 46%, transparent 76%), var(--ks-color-background-canvas); --ks-material-mesh-canvas-dawn: radial-gradient(118% 36% at 78% -10%, color-mix(in srgb, var(--ks-color-status-warm-surface) 94%, var(--ks-color-background-canvas)) 0%, color-mix(in srgb, var(--ks-color-status-warm-surface) 52%, transparent) 40%, color-mix(in srgb, var(--ks-color-status-warm-surface) 16%, transparent) 62%, transparent 78%), radial-gradient(92% 30% at 4% -6%, color-mix(in srgb, var(--ks-color-action-subtle-surface) 82%, var(--ks-color-background-canvas)) 0%, color-mix(in srgb, var(--ks-color-action-subtle-surface) 40%, transparent) 42%, color-mix(in srgb, var(--ks-color-action-subtle-surface) 12%, transparent) 64%, transparent 80%), radial-gradient(150% 24% at 44% 9%, color-mix(in srgb, var(--ks-color-status-sage-surface) 58%, var(--ks-color-background-canvas)) 0%, color-mix(in srgb, var(--ks-color-status-sage-surface) 26%, transparent) 48%, transparent 76%), linear-gradient(180deg, color-mix(in srgb, var(--ks-color-status-warm-surface) 14%, transparent) 0%, color-mix(in srgb, var(--ks-color-status-sage-surface) 6%, transparent) 18%, transparent 30%), var(--ks-color-background-canvas); --ks-material-mesh-surface-veil: color-mix(in srgb, var(--ks-color-surface-card) 82%, transparent); /* Module entries use a functional single-plane header for ordinary pages and module homes. The first lead object or feed item lives below the fixed chrome; older multi-plane rail values are not the current page-entry structure. */ --ks-title-tone-minimal-row-a: 126px; --ks-title-tone-minimal-row-b: 0px; --ks-title-tone-minimal-row-c: 0px; --ks-title-tone-minimal-row-d: 0px; --ks-title-tone-minimal-strip-a: 100%; --ks-title-tone-minimal-strip-b: 0%; --ks-title-tone-minimal-strip-c: 0%; --ks-title-tone-minimal-strip-d: 0%; --ks-title-tone-minimal-block-a: var(--ks-color-scene-night-surface); --ks-title-tone-minimal-block-b: var(--ks-color-background-canvas); --ks-title-tone-minimal-block-c: var(--ks-color-background-canvas); --ks-title-tone-minimal-block-d: var(--ks-color-background-canvas); --ks-title-tone-minimal-surface-below: var(--ks-color-background-canvas); --ks-title-tone-minimal-content-inset-inline: 30px; --ks-title-tone-minimal-feature-stack-inset-top: 16px; --ks-title-tone-minimal-home-stack-inset-top: 24px; --ks-title-tone-minimal-eyebrow-gap: 6px; --ks-title-tone-minimal-material-opacity: 0.16; --ks-title-tone-minimal-material-x: 55%; --ks-title-tone-minimal-material-y: 42%; --ks-title-tone-minimal-text: var(--ks-color-scene-night-content); --ks-title-tone-minimal-text-soft: color-mix(in srgb, var(--ks-color-scene-night-content) 82%, transparent); --ks-title-tone-minimal-text-muted: color-mix(in srgb, var(--ks-color-scene-night-content) 64%, transparent); --ks-title-tone-minimal-chip-bg: color-mix(in srgb, var(--ks-color-scene-night-content) 13%, transparent); --ks-title-tone-minimal-chip-line: color-mix(in srgb, var(--ks-color-scene-night-content) 22%, transparent); --ks-title-tone-warm-row-a: 134px; --ks-title-tone-warm-row-b: 62px; --ks-title-tone-warm-row-c: 24px; --ks-title-tone-warm-row-d: 36px; --ks-title-tone-warm-strip-a: 52%; --ks-title-tone-warm-strip-b: 24%; --ks-title-tone-warm-strip-c: 8%; --ks-title-tone-warm-strip-d: 16%; --ks-title-tone-warm-block-a: var(--ks-color-status-warm-surface); --ks-title-tone-warm-block-b: color-mix(in srgb, var(--ks-color-status-warm-content) 58%, var(--ks-color-status-warm-surface) 42%); --ks-title-tone-warm-block-c: var(--ks-color-status-sage-surface); --ks-title-tone-warm-block-d: color-mix(in srgb, var(--ks-color-border-control) 68%, var(--ks-color-background-subtle) 32%); --ks-title-tone-warm-material-opacity: 0.2; --ks-title-tone-warm-material-x: 44%; --ks-title-tone-warm-material-y: 52%; --ks-title-tone-warm-text: var(--ks-color-text-primary); --ks-title-tone-warm-text-soft: color-mix(in srgb, var(--ks-color-text-primary) 74%, transparent); --ks-title-tone-warm-text-muted: color-mix(in srgb, var(--ks-color-text-primary) 56%, transparent); --ks-title-tone-warm-chip-bg: color-mix(in srgb, var(--ks-color-text-primary) 7%, transparent); --ks-title-tone-warm-chip-line: color-mix(in srgb, var(--ks-color-text-primary) 14%, transparent); --ks-title-tone-neutral-row-a: 134px; --ks-title-tone-neutral-row-b: 62px; --ks-title-tone-neutral-row-c: 24px; --ks-title-tone-neutral-row-d: 36px; --ks-title-tone-neutral-strip-a: 52%; --ks-title-tone-neutral-strip-b: 24%; --ks-title-tone-neutral-strip-c: 8%; --ks-title-tone-neutral-strip-d: 16%; --ks-title-tone-neutral-block-a: var(--ks-color-scene-night-surface); --ks-title-tone-neutral-block-b: var(--ks-color-accent-connect); --ks-title-tone-neutral-block-c: var(--ks-color-status-warm-surface); --ks-title-tone-neutral-block-d: color-mix(in srgb, var(--ks-color-status-sage-content) 54%, var(--ks-color-status-sage-surface) 46%); --ks-title-tone-neutral-material-opacity: 0.16; --ks-title-tone-neutral-material-x: 55%; --ks-title-tone-neutral-material-y: 42%; --ks-title-tone-neutral-text: var(--ks-color-scene-night-content); --ks-title-tone-neutral-text-soft: color-mix(in srgb, var(--ks-color-scene-night-content) 82%, transparent); --ks-title-tone-neutral-text-muted: color-mix(in srgb, var(--ks-color-scene-night-content) 64%, transparent); --ks-title-tone-neutral-chip-bg: color-mix(in srgb, var(--ks-color-scene-night-content) 13%, transparent); --ks-title-tone-neutral-chip-line: color-mix(in srgb, var(--ks-color-scene-night-content) 22%, transparent); --ks-title-tone-restrained-row-a: 160px; --ks-title-tone-restrained-row-b: 40px; --ks-title-tone-restrained-row-c: 24px; --ks-title-tone-restrained-row-d: 32px; --ks-title-tone-restrained-strip-a: 62%; --ks-title-tone-restrained-strip-b: 16%; --ks-title-tone-restrained-strip-c: 8%; --ks-title-tone-restrained-strip-d: 14%; --ks-title-tone-restrained-block-a: var(--ks-color-scene-night-surface); --ks-title-tone-restrained-block-b: color-mix(in srgb, var(--ks-color-scene-night-surface) 74%, var(--ks-color-action-primary-surface) 26%); --ks-title-tone-restrained-block-c: color-mix(in srgb, var(--ks-color-accent-connect) 64%, var(--ks-color-background-subtle) 36%); --ks-title-tone-restrained-block-d: color-mix(in srgb, var(--ks-color-border-control) 72%, var(--ks-color-background-subtle) 28%); --ks-title-tone-restrained-material-opacity: 0.18; --ks-title-tone-restrained-material-x: 52%; --ks-title-tone-restrained-material-y: 64%; --ks-title-tone-restrained-text: var(--ks-color-scene-night-content); --ks-title-tone-restrained-text-soft: color-mix(in srgb, var(--ks-color-scene-night-content) 82%, transparent); --ks-title-tone-restrained-text-muted: color-mix(in srgb, var(--ks-color-scene-night-content) 64%, transparent); --ks-title-tone-restrained-chip-bg: color-mix(in srgb, var(--ks-color-scene-night-content) 13%, transparent); --ks-title-tone-restrained-chip-line: color-mix(in srgb, var(--ks-color-scene-night-content) 22%, transparent); /* Title Header add-on contract. Routine module headers use Tier 1 paper plane; immersive moments may use Tier 2 night cap or rare Tier 3 gouache field. */ --ks-title-header-eyebrow-size: var(--ks-typography-size-mini); --ks-title-header-eyebrow-weight: var(--ks-typography-weight-label); --ks-title-header-eyebrow-tracking: 0.04em; --ks-title-header-eyebrow-transform: none; --ks-title-header-eyebrow-gap: 6px; --ks-title-header-title-size: var(--ks-typography-size-phone-title); --ks-title-header-title-weight: var(--ks-typography-weight-heading); --ks-title-header-title-leading: var(--ks-typography-leading-tight); --ks-title-header-title-tracking: var(--ks-typography-tracking-default); --ks-title-header-subtitle-size: var(--ks-typography-size-card); --ks-title-header-subtitle-gap: 9px; --ks-title-header-inset-inline: var(--ks-space-5); --ks-title-header-inset-top: var(--ks-space-6); --ks-title-header-inset-bottom: var(--ks-space-4); --ks-title-header-status-band-height: 36px; --ks-title-header-radius: 0px; --ks-title-header-surface: var(--ks-color-background-canvas); --ks-title-header-eyebrow: var(--ks-color-text-secondary); --ks-title-header-title: var(--ks-color-text-primary); --ks-title-header-subtitle: var(--ks-color-text-secondary); --ks-title-header-divider: var(--ks-color-border-subtle); --ks-title-header-divider-size: 1px; --ks-title-header-shadow: var(--ks-shadow-none); --ks-title-header-night-surface: var(--ks-color-scene-night-surface); --ks-title-header-night-eyebrow: color-mix(in srgb, var(--ks-color-scene-night-content) 72%, transparent); --ks-title-header-night-title: var(--ks-color-scene-night-content); --ks-title-header-night-subtitle: color-mix(in srgb, var(--ks-color-scene-night-content) 82%, transparent); --ks-title-header-night-divider: var(--ks-color-transparent); --ks-title-header-night-inset-bottom: var(--ks-space-5); --ks-title-header-gouache-min-height: 150px; --ks-title-header-gouache-image: radial-gradient(120% 90% at 30% 25%, var(--ks-color-status-warm-surface) 0%, color-mix(in srgb, var(--ks-color-status-warm-surface) 54%, var(--ks-color-action-primary-surface) 46%) 34%, color-mix(in srgb, var(--ks-color-accent-connect) 50%, var(--ks-color-status-warm-surface) 50%) 66%, var(--ks-color-accent-connect) 100%); --ks-title-header-gouache-scrim: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ks-color-text-primary) 14%, transparent) 100%); --ks-title-header-gouache-eyebrow: color-mix(in srgb, var(--ks-color-text-primary) 66%, transparent); --ks-title-header-gouache-title: var(--ks-color-text-primary); --ks-title-header-gouache-tracking: 0.06em; /* Page shell layout helpers. These support real page and feature screens; they are not a page-type taxonomy. */ --ks-page-shell-fixed-header-height: 126px; --ks-page-shell-fixed-header-scroll-height: calc(100% - var(--ks-page-shell-fixed-header-height)); --ks-page-shell-fixed-header-scroll-padding: 4px 18px 102px; --ks-page-shell-fixed-header-scroll-fade-size: 46px; --ks-page-shell-fixed-header-scroll-mask: linear-gradient(180deg, #000 0 calc(100% - var(--ks-page-shell-fixed-header-scroll-fade-size)), transparent 100%); --ks-page-shell-fixed-header-lead-margin: 0 0 12px 0; --ks-page-shell-lead-object-title-height: 202px; --ks-page-shell-lead-object-title-padding-top: var(--ks-title-header-inset-top); --ks-page-shell-lead-object-title-size: 36px; --ks-page-shell-lead-object-margin: -66px 14px 12px 14px; --ks-page-shell-lead-object-min-height: 228px; --ks-page-shell-lead-object-padding: 22px 20px 22px 20px; --ks-page-shell-lead-object-bg: radial-gradient(circle at 28% 34%, rgba(216, 200, 184, 0.34), transparent 0 48px), radial-gradient(circle at 76% 72%, rgba(102, 121, 132, 0.18), transparent 0 62px), rgba(255, 252, 245, 0.94); --ks-page-shell-object-first-chrome-height: 90px; --ks-page-shell-object-first-chrome-padding: 0 20px 14px 20px; --ks-page-shell-object-first-chrome-bg: color-mix(in srgb, var(--ks-color-scene-night-surface) 88%, var(--ks-color-background-canvas) 12%); --ks-page-shell-object-first-kicker-size: 10px; --ks-page-shell-object-first-title-size: 25px; --ks-page-shell-object-first-object-height: 278px; --ks-page-shell-object-first-object-margin: 12px 14px 12px 14px; --ks-page-shell-object-first-object-radius: 14px; --ks-page-shell-object-first-object-bg: radial-gradient(circle at 50% 42%, rgba(216, 200, 184, 0.88) 0 28px, transparent 29px), radial-gradient(circle at 45% 42%, rgba(102, 121, 132, 0.7) 0 82px, transparent 83px), linear-gradient(180deg, rgba(246, 245, 239, 0.92), rgba(230, 224, 210, 0.72)); /* Shipping website responsive contract. */ --ks-layout-website-content-max: 1160px; --ks-layout-website-gutter-wide: 40px; --ks-layout-website-gutter-compact: 28px; --ks-layout-website-stack-breakpoint: 920px; --ks-layout-website-compact-breakpoint: 560px; --ks-layout-website-phone-scale-stack: 0.84; --ks-layout-website-phone-scale-compact: 0.68; --ks-layout-website-hero-mobile-fragment-max: 4; /* Shared output-card frame roles. A card may override the open accent and visual slots while preserving the frame, typography, rhythm, and interaction grammar. */ --ks-card-surface: var(--ks-color-surface-card); --ks-card-surface-subtle: var(--ks-color-background-subtle); --ks-card-line: var(--ks-color-border-control); --ks-card-line-soft: var(--ks-color-border-subtle); --ks-card-ink: var(--ks-color-text-primary); --ks-card-ink-soft: var(--ks-color-text-secondary); --ks-card-ink-muted: color-mix(in srgb, var(--ks-color-text-primary) 52%, transparent); --ks-card-radius: var(--ks-radius-card); --ks-card-shadow: var(--ks-shadow-card); --ks-card-brief-padding: 12px; --ks-card-brief-gap: 8px; --ks-card-brief-radius: var(--ks-card-radius); --ks-card-brief-atom-size: 13px; --ks-card-brief-atom-leading: 1.2; --ks-card-brief-atom-weight: var(--ks-typography-weight-strong); --ks-card-brief-descriptor-size: 10.5px; --ks-card-brief-descriptor-leading: 1.25; --ks-card-brief-descriptor-weight: 500; --ks-card-brief-action-height: 28px; --ks-card-brief-action-gap: 8px; --ks-card-brief-visual-size: 42px; --ks-card-brief-visual-stroke: 2px; --ks-card-brief-visual-dot-size: 6px; --ks-card-brief-sparkline-height: 28px; --ks-card-detail-radius: var(--ks-radius-sheet); --ks-card-detail-scroll-fade-size: 28px; --ks-card-detail-scroll-mask: linear-gradient(180deg, #000 0 calc(100% - var(--ks-card-detail-scroll-fade-size)), transparent 100%); --ks-card-detail-first-read-max-height: 440px; --ks-card-detail-continuation-start-clearance: var(--ks-card-detail-scroll-fade-size); --ks-card-detail-lead-size: var(--ks-typography-size-body); --ks-card-detail-lead-leading: 1.35; --ks-card-detail-lead-weight: var(--ks-typography-weight-body); --ks-card-detail-connection-size: var(--ks-typography-size-mini); --ks-card-detail-connection-weight: var(--ks-typography-weight-strong); --ks-card-detail-connection-tracking: var(--ks-typography-tracking-default); --ks-card-detail-connection-ink: var(--ks-card-ink-soft); --ks-card-detail-connection-content-gap: 6px; --ks-card-detail-connection-arrow-size: var(--ks-space-3); --ks-card-detail-path-min-height: 44px; --ks-card-detail-path-padding-block: var(--ks-card-detail-support-row-padding-block); --ks-card-detail-path-gap: var(--ks-space-3); --ks-card-detail-path-line: var(--ks-card-line-soft); --ks-card-detail-connection-dot-size: 7px; --ks-card-detail-connection-dot-gap: var(--ks-card-detail-connection-content-gap); --ks-card-detail-connection-ink-nutrition: var(--ks-color-identity-module-iris); --ks-card-detail-connection-ink-mindfulness: var(--ks-color-identity-module-celadon); --ks-card-detail-connection-ink-habits: var(--ks-color-identity-module-plum); --ks-card-detail-connection-ink-sleep: var(--ks-color-identity-module-aubergine); --ks-card-detail-connection-ink-mood: var(--ks-color-identity-module-rosewood); --ks-card-detail-connection-ink-movement: var(--ks-color-identity-module-brass); --ks-card-detail-material-ink-nutrition: var(--ks-color-identity-module-iris); --ks-card-detail-material-ink-mindfulness: var(--ks-color-identity-module-celadon); --ks-card-detail-material-ink-habits: var(--ks-color-identity-module-plum); --ks-card-detail-material-ink-sleep: var(--ks-color-identity-module-aubergine); --ks-card-detail-material-ink-mood: var(--ks-color-identity-module-rosewood); --ks-card-detail-material-ink-movement: var(--ks-color-identity-module-brass); --ks-card-detail-material-module-mesh-nutrition: radial-gradient(94% 62% at -10% -6%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 10%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 2%, transparent) 46%, transparent 78%), radial-gradient(110% 58% at 104% 4%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 1%, transparent) 48%, transparent 80%), radial-gradient(102% 70% at 112% 58%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 4%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 1%, transparent) 46%, transparent 80%), radial-gradient(118% 64% at -12% 78%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 2%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 1%, transparent) 48%, transparent 82%), radial-gradient(106% 58% at 82% 108%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 1%, transparent) 48%, transparent 82%), linear-gradient(145deg, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 1%, var(--ks-card-surface)) 0%, var(--ks-card-surface) 44%, color-mix(in srgb, var(--ks-card-detail-material-ink-nutrition) 1%, var(--ks-card-surface)) 100%); --ks-card-detail-material-module-mesh-mindfulness: radial-gradient(94% 62% at -10% -6%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 10%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 2%, transparent) 46%, transparent 78%), radial-gradient(110% 58% at 104% 4%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 1%, transparent) 48%, transparent 80%), radial-gradient(102% 70% at 112% 58%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 4%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 1%, transparent) 46%, transparent 80%), radial-gradient(118% 64% at -12% 78%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 2%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 1%, transparent) 48%, transparent 82%), radial-gradient(106% 58% at 82% 108%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 1%, transparent) 48%, transparent 82%), linear-gradient(145deg, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 1%, var(--ks-card-surface)) 0%, var(--ks-card-surface) 44%, color-mix(in srgb, var(--ks-card-detail-material-ink-mindfulness) 1%, var(--ks-card-surface)) 100%); --ks-card-detail-material-module-mesh-habits: radial-gradient(94% 62% at -10% -6%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 10%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 2%, transparent) 46%, transparent 78%), radial-gradient(110% 58% at 104% 4%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 1%, transparent) 48%, transparent 80%), radial-gradient(102% 70% at 112% 58%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 4%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 1%, transparent) 46%, transparent 80%), radial-gradient(118% 64% at -12% 78%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 2%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 1%, transparent) 48%, transparent 82%), radial-gradient(106% 58% at 82% 108%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 1%, transparent) 48%, transparent 82%), linear-gradient(145deg, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 1%, var(--ks-card-surface)) 0%, var(--ks-card-surface) 44%, color-mix(in srgb, var(--ks-card-detail-material-ink-habits) 1%, var(--ks-card-surface)) 100%); --ks-card-detail-material-module-mesh-sleep: radial-gradient(94% 62% at -10% -6%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 10%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 2%, transparent) 46%, transparent 78%), radial-gradient(110% 58% at 104% 4%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 1%, transparent) 48%, transparent 80%), radial-gradient(102% 70% at 112% 58%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 4%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 1%, transparent) 46%, transparent 80%), radial-gradient(118% 64% at -12% 78%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 2%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 1%, transparent) 48%, transparent 82%), radial-gradient(106% 58% at 82% 108%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 1%, transparent) 48%, transparent 82%), linear-gradient(145deg, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 1%, var(--ks-card-surface)) 0%, var(--ks-card-surface) 44%, color-mix(in srgb, var(--ks-card-detail-material-ink-sleep) 1%, var(--ks-card-surface)) 100%); --ks-card-detail-material-module-mesh-mood: radial-gradient(94% 62% at -10% -6%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 10%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 2%, transparent) 46%, transparent 78%), radial-gradient(110% 58% at 104% 4%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 1%, transparent) 48%, transparent 80%), radial-gradient(102% 70% at 112% 58%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 4%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 1%, transparent) 46%, transparent 80%), radial-gradient(118% 64% at -12% 78%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 2%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 1%, transparent) 48%, transparent 82%), radial-gradient(106% 58% at 82% 108%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 1%, transparent) 48%, transparent 82%), linear-gradient(145deg, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 1%, var(--ks-card-surface)) 0%, var(--ks-card-surface) 44%, color-mix(in srgb, var(--ks-card-detail-material-ink-mood) 1%, var(--ks-card-surface)) 100%); --ks-card-detail-material-module-mesh-movement: radial-gradient(94% 62% at -10% -6%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 10%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 2%, transparent) 46%, transparent 78%), radial-gradient(110% 58% at 104% 4%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 1%, transparent) 48%, transparent 80%), radial-gradient(102% 70% at 112% 58%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 4%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 1%, transparent) 46%, transparent 80%), radial-gradient(118% 64% at -12% 78%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 2%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 1%, transparent) 48%, transparent 82%), radial-gradient(106% 58% at 82% 108%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 3%, var(--ks-card-surface)) 0%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 1%, transparent) 48%, transparent 82%), linear-gradient(145deg, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 1%, var(--ks-card-surface)) 0%, var(--ks-card-surface) 44%, color-mix(in srgb, var(--ks-card-detail-material-ink-movement) 1%, var(--ks-card-surface)) 100%); --ks-card-detail-accent-ink: var(--ks-color-accent-clay-text); --ks-card-detail-chart-surface: var(--ks-card-surface); --ks-card-detail-visual-min-height: 132px; --ks-card-detail-visual-max-height: 46%; --ks-card-detail-visual-radius: 12px; --ks-card-detail-visual-mark-size: var(--ks-typography-size-label); --ks-card-detail-visual-mark-weight: var(--ks-typography-weight-label); --ks-card-detail-visual-accent: var(--ks-color-accent-clay); --ks-card-detail-visual-track: var(--ks-color-background-subtle); --ks-card-detail-visual-line: var(--ks-color-border-control); --ks-card-detail-visual-curve-stroke: 2; --ks-card-detail-visual-led-height: 252px; --ks-card-detail-visual-led-height-compact: 228px; --ks-card-detail-visual-led-story-overlap: var(--ks-space-6); --ks-card-detail-visual-led-story-inset-top: var(--ks-space-5); --ks-card-detail-visual-led-content-inset-inline: var(--ks-space-6); --ks-card-detail-visual-led-media-inset-top: var(--ks-space-12); --ks-card-detail-visual-led-connection-inset-top: var(--ks-space-4); --ks-card-detail-fact-gap: 3px; --ks-card-detail-fact-padding-block: 10px; --ks-card-detail-fact-padding-inline: 12px; --ks-card-detail-fact-value-weight: var(--ks-typography-weight-data); --ks-card-detail-fact-label-leading: 1.2; --ks-card-detail-fact-label-weight: var(--ks-typography-weight-label); --ks-card-detail-support-group-gap: 9px; --ks-card-detail-support-title-leading: 1.2; --ks-card-detail-support-title-weight: var(--ks-typography-weight-strong); --ks-card-detail-support-row-leading: 1.38; --ks-card-detail-support-row-weight: var(--ks-typography-weight-label); --ks-card-detail-support-row-gap: 12px; --ks-card-detail-support-row-padding-block: 9px; --ks-card-detail-estimate-padding-block: 2px; --ks-card-detail-estimate-padding-inline: 8px; --ks-card-detail-estimate-margin-inline: 6px; --ks-card-detail-estimate-size: 10px; --ks-card-detail-estimate-weight: var(--ks-typography-weight-label); --ks-card-detail-action-margin-top: 10px; --ks-card-detail-action-gap: 8px; --ks-card-detail-resolved-size: var(--ks-typography-size-card); --ks-card-detail-resolved-weight: var(--ks-typography-weight-strong); /* Today card color rule: every card, data and action, sits on this neutral paper surface. Color never marks card role or urgency (G2). The tinted card surfaces are reserved for rare single-card emphasis: cardInvite (green) is the chat/agent card; cardDecision (ochre, thin accent only) is a real state-changing confirm; cardRecap (indigo) is occasional emphasis. */ --ks-today-card-surface: color-mix(in srgb, var(--ks-color-surface-card) 90%, transparent); --ks-today-card-default: var(--ks-card-surface); --today-card-default: var(--ks-today-card-default); --ks-today-card-decision: var(--ks-color-status-warm-surface); --today-card-decision: var(--ks-today-card-decision); --ks-today-card-invite: var(--ks-color-status-sage-surface); --today-card-invite: var(--ks-today-card-invite); --ks-today-card-recap: var(--ks-color-scene-night-surface); --today-card-recap: var(--ks-today-card-recap); --ks-today-ink: var(--ks-card-ink); --ks-today-ink-strong: var(--ks-card-ink); --ks-today-ink-soft: color-mix(in srgb, var(--ks-color-text-primary) 62%, transparent); --ks-today-ink-muted: var(--ks-card-ink-muted); --ks-today-line: color-mix(in srgb, var(--ks-color-border-control) 22%, transparent); --ks-today-line-soft: color-mix(in srgb, var(--ks-color-border-subtle) 44%, transparent); --ks-today-decision-line: color-mix(in srgb, var(--ks-color-status-warm-content) 24%, transparent); --ks-today-default-line: color-mix(in srgb, var(--ks-color-action-primary-surface) 18%, transparent); --ks-today-green-line: color-mix(in srgb, var(--ks-color-status-sage-content) 22%, transparent); --ks-today-on-dark: var(--ks-color-scene-night-content); --ks-today-button-dark: var(--ks-color-action-primary-surface); --ks-today-button-dark-hover: color-mix(in srgb, var(--ks-color-action-primary-surface) 78%, var(--ks-color-scene-night-surface) 22%); --ks-today-button-on-dark: var(--ks-color-action-primary-content); --ks-today-control-line: color-mix(in srgb, var(--ks-color-border-control) 18%, transparent); --ks-today-invite-line: color-mix(in srgb, var(--ks-color-status-sage-content) 18%, transparent); --ks-today-avatar-shadow: color-mix(in srgb, var(--ks-color-status-sage-content) 14%, transparent); /* Today action button color rule: the primary action button is mineral blue (this). Only the chat/agent button is green (buttonChat). Secondary/dismiss is a ghost: paper fill, blue text, soft line. Button color marks the next step, never module identity or status (G2). */ --ks-today-button-primary-bg: var(--ks-color-action-primary-surface); --ks-today-button-primary-on: var(--ks-color-action-primary-content); --ks-today-button-chat-bg: var(--ks-color-action-primary-surface); --ks-today-button-chat-on: var(--ks-color-action-primary-content); --ks-today-button-secondary-bg: color-mix(in srgb, var(--ks-color-surface-card) 72%, transparent); --ks-today-button-secondary-on: var(--ks-color-action-primary-surface); --ks-today-button-secondary-line: var(--ks-today-control-line); /* Today card contract tokens derived from today_card_principles.md: dense mosaic, one atom, compact action controls, sanctioned mini-viz dimensions. */ --ks-today-grid-columns: var(--ks-card-grid-columns); --ks-today-grid-gap: var(--ks-card-gap); --ks-today-span-full: 6; --ks-today-span-half: 3; --ks-today-span-third: 2; --ks-today-card-padding: var(--ks-card-brief-padding); --ks-today-card-gap: var(--ks-card-brief-gap); --ks-today-card-radius: var(--ks-card-brief-radius); --ks-today-card-min-third: 82px; --ks-today-card-min-half: var(--ks-card-min); --ks-today-card-min-full: var(--ks-card-thin); --ks-today-atom-size: var(--ks-card-brief-atom-size); --ks-today-atom-leading: var(--ks-card-brief-atom-leading); --ks-today-atom-weight: var(--ks-card-brief-atom-weight); --ks-today-atom-max-lines: 2; --ks-today-descriptor-size: var(--ks-card-brief-descriptor-size); --ks-today-descriptor-leading: var(--ks-card-brief-descriptor-leading); --ks-today-descriptor-weight: var(--ks-card-brief-descriptor-weight); --ks-today-descriptor-max-lines: 1; --ks-today-action-height: var(--ks-card-brief-action-height); --ks-today-action-gap: var(--ks-card-brief-action-gap); --ks-today-viz-size: var(--ks-card-brief-visual-size); --ks-today-viz-stroke: var(--ks-card-brief-visual-stroke); --ks-today-viz-dot-size: var(--ks-card-brief-visual-dot-size); --ks-today-viz-sparkline-height: var(--ks-card-brief-sparkline-height); /* Dismissible cards use a shared low-intrusion affordance: full mobile hit area, icon-only by default, with a faint focus/hover affordance. */ --ks-suggestion-dismiss-hit-size: 44px; --ks-suggestion-dismiss-badge-inset: 12px; --ks-suggestion-dismiss-icon-size: 12px; --ks-suggestion-dismiss-stroke-width: 1.8; --ks-suggestion-dismiss-radius: 50%; --ks-suggestion-dismiss-anchor-x: 20%; --ks-suggestion-dismiss-anchor-y: -20%; --ks-suggestion-dismiss-color: color-mix(in srgb, var(--ks-today-button-secondary-on) 46%, transparent); --ks-suggestion-dismiss-color-hover: color-mix(in srgb, var(--ks-today-button-secondary-on) 68%, transparent); --ks-suggestion-dismiss-badge-line: color-mix(in srgb, var(--ks-today-green-line) 36%, transparent); --ks-suggestion-dismiss-badge-line-hover: color-mix(in srgb, var(--ks-today-button-secondary-on) 18%, transparent); --ks-suggestion-dismiss-badge-bg: color-mix(in srgb, var(--ks-today-card-invite) 72%, var(--ks-color-background-canvas) 28%); --ks-suggestion-dismiss-badge-bg-hover: color-mix(in srgb, var(--ks-today-card-invite) 68%, var(--ks-color-background-canvas) 32%); --ks-suggestion-dismiss-badge-shadow: var(--ks-shadow-none); --ks-suggestion-dismiss-badge-opacity: 0; --ks-suggestion-dismiss-badge-opacity-hover: 0.14; /* Today miniature visualization tokens. */ --ks-today-viz-paper: var(--ks-color-surface-card); --ks-today-viz-paper-warm: var(--ks-color-background-subtle); --ks-today-viz-food-base: color-mix(in srgb, var(--ks-color-status-warm-surface) 42%, var(--ks-color-surface-card) 58%); --ks-today-viz-track: color-mix(in srgb, var(--ks-color-border-control) 14%, transparent); --ks-today-viz-track-soft: color-mix(in srgb, var(--ks-color-border-control) 10%, transparent); --ks-today-viz-track-strong: color-mix(in srgb, var(--ks-color-border-control) 26%, transparent); --ks-today-viz-light-soft: color-mix(in srgb, var(--ks-color-surface-card) 38%, transparent); --ks-today-viz-light: color-mix(in srgb, var(--ks-color-surface-card) 48%, transparent); --ks-today-viz-light-strong: color-mix(in srgb, var(--ks-color-surface-card) 82%, transparent); --ks-today-viz-food-shadow: color-mix(in srgb, var(--ks-color-status-warm-content) 8%, transparent); --ks-today-viz-food-fill-top: color-mix(in srgb, var(--ks-color-status-warm-content) 70%, var(--ks-color-status-warm-surface) 30%); --ks-today-viz-food-fill-bottom: color-mix(in srgb, var(--ks-color-status-warm-content) 58%, var(--ks-color-status-warm-surface) 42%); --ks-today-viz-mood-soft: color-mix(in srgb, var(--ks-color-accent-connect) 28%, transparent); --ks-today-viz-mood-strong: color-mix(in srgb, var(--ks-color-accent-connect) 78%, transparent); --ks-today-viz-meal-soft: color-mix(in srgb, var(--ks-color-status-sage-content) 22%, transparent); --ks-today-viz-meal-line: color-mix(in srgb, var(--ks-color-status-sage-content) 10%, transparent); --ks-today-viz-meal-strong: color-mix(in srgb, var(--ks-color-status-sage-content) 62%, transparent); --today-card-recap-on: var(--ks-color-scene-night-content); /* Large module cards stay paper-forward. Use lead surfaces for one primary data object; avoid dark or decorative gradients behind dense metrics. */ --ks-module-card-surface: color-mix(in srgb, var(--ks-color-surface-card) 94%, var(--ks-color-background-subtle) 6%); --ks-module-card-surface-lead: linear-gradient(180deg, color-mix(in srgb, var(--ks-color-surface-card) 96%, white 4%), color-mix(in srgb, var(--ks-color-surface-card) 90%, var(--ks-color-action-primary-surface) 10%)); --ks-module-card-surface-note: color-mix(in srgb, var(--ks-color-surface-card) 86%, var(--ks-color-status-sage-surface) 14%); --ks-module-card-surface-control: color-mix(in srgb, var(--ks-color-surface-card) 72%, transparent); --ks-module-card-warm-prompt-surface: radial-gradient(130% 100% at 50% -12%, color-mix(in srgb, var(--ks-color-background-canvas) 70%, transparent) 0%, transparent 62%), color-mix(in srgb, var(--ks-color-status-warm-surface) 20%, var(--ks-color-surface-card)); --ks-module-card-warm-prompt-line: color-mix(in srgb, var(--ks-color-status-warm-content) 18%, transparent); --ks-module-card-warm-prompt-shadow: 0 10px 20px rgba(39, 42, 82, 0.055); --ks-module-card-line: color-mix(in srgb, var(--ks-color-border-control) 18%, transparent); --ks-module-card-line-soft: color-mix(in srgb, var(--ks-color-border-subtle) 48%, transparent); --ks-module-card-line-on-tone: color-mix(in srgb, var(--ks-color-scene-night-content) 36%, transparent); --ks-module-card-shadow: 0 12px 28px color-mix(in srgb, var(--ks-color-scene-night-surface) 8%, transparent); --ks-module-card-shadow-lead: 0 16px 34px color-mix(in srgb, var(--ks-color-scene-night-surface) 13%, transparent); --ks-module-card-padding: 14px 14px 14px 14px; --ks-module-card-lead-padding: 16px 14px 16px 14px; --ks-module-card-gap: 12px; --ks-module-card-title-size: 17px; --ks-module-card-title-weight: var(--ks-typography-weight-heading); --ks-module-card-title-leading: 1.12; --ks-module-card-body-size: 12px; --ks-module-card-body-leading: 1.45; /* Card grid structure. */ --ks-card-grid-columns: 6; --ks-card-gap: 10px; --ks-card-min: 104px; --ks-card-thin: 58px; --ks-card-tall: 126px; /* Primary app chrome navigation. */ --ks-app-nav-width: 276px; --ks-app-nav-height: 62px; --ks-app-nav-left: 14px; --ks-app-nav-bottom: 20px; --ks-app-nav-padding: 6px 10px 6px 10px; --ks-app-nav-radius: 31px; --ks-app-nav-button-radius: 22px; --ks-app-nav-button-gap: 5px; --ks-app-nav-bg: color-mix(in srgb, var(--ks-color-surface-card) 92%, transparent); --ks-app-nav-line: var(--ks-color-border-subtle); --ks-app-nav-shadow: 0 12px 28px color-mix(in srgb, var(--ks-color-scene-night-surface) 12%, transparent); --ks-app-nav-inset-light: inset 0 1px 0 rgba(255,255,255,0.68); --ks-app-nav-inactive: color-mix(in srgb, var(--ks-color-text-primary) 50%, transparent); --ks-app-nav-active: var(--ks-color-action-primary-surface); --ks-app-nav-icon-size: 21px; --ks-app-nav-icon-stroke: 1.9; --ks-app-nav-label-size: 10px; --ks-app-nav-label-weight: var(--ks-typography-weight-label); --ks-app-nav-label-active-weight: var(--ks-typography-weight-strong); --ks-app-nav-label-leading: 1.32; --ks-mood-checkin-line-size: 1px; --ks-mood-checkin-trigger-height: 44px; --ks-mood-checkin-trigger-face-size: 32px; --ks-mood-checkin-trigger-gap: var(--ks-space-1); --ks-mood-checkin-trigger-padding-inline: var(--ks-space-1); --ks-mood-checkin-trigger-radius: var(--ks-radius-control); --ks-mood-checkin-trigger-label-size: var(--ks-typography-size-mini); --ks-mood-checkin-trigger-label-weight: var(--ks-typography-weight-action); --ks-mood-checkin-trigger-label-leading: 1.15; --ks-mood-checkin-trigger-label: var(--ks-color-text-primary); --ks-mood-checkin-trigger-surface: var(--ks-color-transparent); --ks-mood-checkin-trigger-surface-hover: var(--ks-color-action-subtle-surface); --ks-mood-checkin-popover-width: 328px; --ks-mood-checkin-popover-offset: var(--ks-space-2); --ks-mood-checkin-popover-padding: var(--ks-space-4); --ks-mood-checkin-popover-gap: var(--ks-space-3); --ks-mood-checkin-popover-radius: var(--ks-radius-sheet); --ks-mood-checkin-popover-surface: var(--ks-color-surface-card); --ks-mood-checkin-popover-line: var(--ks-color-border-subtle); --ks-mood-checkin-popover-shadow: var(--ks-shadow-card); --ks-mood-checkin-popover-heading-size: var(--ks-typography-size-card); --ks-mood-checkin-popover-heading-weight: var(--ks-typography-weight-heading); --ks-mood-checkin-option-face-size: 44px; --ks-mood-checkin-option-min-height: 76px; --ks-mood-checkin-option-gap: var(--ks-space-1); --ks-mood-checkin-option-padding-block: var(--ks-space-2); --ks-mood-checkin-option-radius: var(--ks-radius-control); --ks-mood-checkin-option-label-size: var(--ks-typography-size-mini); --ks-mood-checkin-option-label-weight: var(--ks-typography-weight-action); --ks-mood-checkin-option-label-leading: var(--ks-mood-checkin-trigger-label-leading); --ks-mood-checkin-option-label: var(--ks-color-text-secondary); --ks-mood-checkin-option-selected-surface: var(--ks-color-action-subtle-surface); --ks-mood-checkin-option-selected-line: color-mix(in srgb, var(--ks-color-action-primary-surface) 22%, transparent); /* Quick chat surface shared by module voice/text entry and compact local thread. */ --ks-quick-chat-surface-inline-start: 22px; --ks-quick-chat-surface-inline-end-with-orb: 92px; --ks-quick-chat-surface-bottom: 24px; --ks-quick-chat-surface-min-height: 58px; --ks-quick-chat-surface-padding: 14px 12px 12px 12px; --ks-quick-chat-surface-gap: 8px; --ks-quick-chat-surface-radius: 20px; --ks-quick-chat-surface-bg: color-mix(in srgb, var(--ks-color-surface-card) 96%, transparent); --ks-quick-chat-surface-line: color-mix(in srgb, var(--ks-color-border-control) 16%, transparent); --ks-quick-chat-surface-shadow: 0 18px 44px color-mix(in srgb, var(--ks-color-scene-night-surface) 16%, transparent); --ks-quick-chat-orb-size: 70px; --ks-quick-chat-orb-right: 18px; --ks-quick-chat-turn-gap: 8px; --ks-quick-chat-question-size: 12.5px; --ks-quick-chat-question-weight: 430; --ks-quick-chat-question-color: color-mix(in srgb, var(--ks-color-text-primary) 72%, transparent); --ks-quick-chat-answer-size: 11.5px; --ks-quick-chat-answer-weight: var(--ks-typography-weight-body); --ks-quick-chat-answer-strong-weight: var(--ks-typography-weight-strong); --ks-quick-chat-answer-color: color-mix(in srgb, var(--ks-color-text-primary) 74%, transparent); --ks-quick-chat-answer-bg: color-mix(in srgb, var(--ks-color-background-subtle) 82%, transparent); --ks-quick-chat-answer-line: color-mix(in srgb, var(--ks-color-border-control) 13%, transparent); --ks-quick-chat-input-height: 44px; --ks-quick-chat-input-bg: color-mix(in srgb, var(--ks-color-background-subtle) 74%, transparent); --ks-quick-chat-placeholder-color: color-mix(in srgb, var(--ks-color-text-primary) 46%, transparent); --ks-quick-chat-avatar-width: 28px; --ks-quick-chat-avatar-height: 30px; --ks-quick-chat-thinking-size: 24px; /* Shared chat thread type scale for full and compact densities. */ --ks-chat-thread-weight-scope-pill: var(--ks-typography-weight-strong); --ks-chat-thread-weight-meta: 500; --ks-chat-thread-weight-strong: var(--ks-typography-weight-strong); --ks-chat-thread-weight-support: 500; --ks-chat-thread-weight-emphasis: var(--ks-typography-weight-strong); --ks-chat-thread-weight-badge: var(--ks-typography-weight-strong); --ks-chat-thread-weight-recipe-title: var(--ks-typography-weight-heading); --ks-chat-thread-weight-scale: 500; --ks-chat-thread-letter-scope-pill: 0.08em; --ks-chat-thread-letter-stat-label: 0.07em; --ks-chat-thread-letter-compact-scope-pill: 0.07em; --ks-chat-thread-full-scope-pill-size: 10px; --ks-chat-thread-full-scope-pill-leading: 1; --ks-chat-thread-full-scope-meta-size: 9px; --ks-chat-thread-full-bubble-size: 13px; --ks-chat-thread-full-bubble-leading: 1.42; --ks-chat-thread-full-card-head-size: 12px; --ks-chat-thread-full-body-size: 11px; --ks-chat-thread-full-body-leading: 1.38; --ks-chat-thread-full-stat-minor-size: 8px; --ks-chat-thread-full-stat-value-size: 16px; --ks-chat-thread-full-stat-unit-size: 9px; --ks-chat-thread-full-recipe-title-size: 13px; --ks-chat-thread-full-meta-size: 9.5px; --ks-chat-thread-full-button-size: 11px; --ks-chat-thread-full-slider-label-size: 10px; --ks-chat-thread-full-scale-size: 9px; --ks-chat-thread-full-badge-size: 9px; --ks-chat-thread-full-dense-bubble-size: 12px; --ks-chat-thread-full-dense-bubble-leading: 1.34; --ks-chat-thread-full-dense-card-head-size: 11.5px; --ks-chat-thread-full-dense-body-size: 10.5px; --ks-chat-thread-full-dense-body-leading: 1.32; --ks-chat-thread-compact-scope-pill-size: 8.5px; --ks-chat-thread-compact-scope-pill-leading: 1; --ks-chat-thread-compact-scope-meta-size: 8px; --ks-chat-thread-compact-bubble-size: 10.5px; --ks-chat-thread-compact-bubble-leading: 1.32; --ks-chat-thread-compact-card-head-size: 10px; --ks-chat-thread-compact-body-size: 9.5px; --ks-chat-thread-compact-body-leading: 1.28; --ks-chat-thread-compact-stat-label-size: 7px; --ks-chat-thread-compact-stat-value-size: 12px; --ks-chat-thread-compact-stat-unit-size: 7px; --ks-chat-thread-compact-recipe-title-size: 10.5px; --ks-chat-thread-compact-recipe-title-leading: 1.15; --ks-chat-thread-compact-meta-size: 8.5px; --ks-chat-thread-compact-meta-leading: 1; --ks-chat-thread-compact-button-size: 9px; --ks-chat-thread-compact-slider-label-size: 9px; /* Chat inline card contract from today/chat_inline_card_principles.md: one information atom, optional one-line support, and one or two actions. */ --ks-chat-inline-card-max-full: 286px; --ks-chat-inline-card-max-compact: 250px; --ks-chat-inline-card-padding-full: 12px; --ks-chat-inline-card-padding-compact: 9px; --ks-chat-inline-card-gap-full: 8px; --ks-chat-inline-card-gap-compact: 6px; --ks-chat-inline-card-primary-size-full: 13px; --ks-chat-inline-card-primary-size-compact: 11px; --ks-chat-inline-card-primary-leading-full: 1.28; --ks-chat-inline-card-primary-leading-compact: 1.24; --ks-chat-inline-card-primary-weight-full: var(--ks-typography-weight-strong); --ks-chat-inline-card-primary-weight-compact: var(--ks-typography-weight-strong); --ks-chat-inline-card-support-size-full: 11px; --ks-chat-inline-card-support-size-compact: 9.5px; --ks-chat-inline-card-support-leading-full: 1.34; --ks-chat-inline-card-support-leading-compact: 1.28; --ks-chat-inline-card-support-weight: 460; --ks-chat-inline-card-button-height-full: 32px; --ks-chat-inline-card-button-height-compact: 28px; --ks-chat-inline-card-button-size-full: 11px; --ks-chat-inline-card-button-size-compact: 9.5px; --ks-chat-inline-card-button-weight: var(--ks-typography-weight-action); --ks-chat-inline-card-media-size-full: 60px; --ks-chat-inline-card-media-size-compact: 48px; /* Web-export adapter for the centered Detail overlay inset. Canonical host geometry lives in pattern.cardDetailOverlay. */ --ks-card-detail-inset-inline: 18px; --ks-card-detail-max-height: 438px; --ks-card-detail-edge-clearance: 132px; --ks-card-detail-padding-top: 14px; --ks-card-detail-padding-inline: 18px; --ks-card-detail-padding-bottom: 16px; --ks-card-detail-gap: 12px; --ks-card-detail-media-size: 68px; --ks-card-detail-title-size: 22px; --ks-card-detail-title-leading: 1.12; --ks-card-detail-title-weight: var(--ks-typography-weight-heading); --ks-card-detail-body-size: var(--ks-typography-size-card); --ks-card-detail-body-leading: 1.45; --ks-card-detail-body-weight: var(--ks-typography-weight-body); --ks-card-detail-fact-value-size: 18px; --ks-card-detail-fact-label-size: var(--ks-typography-size-mini); --ks-card-detail-sheet-fact-value-size: 26px; --ks-card-detail-sheet-fact-label-size: 13px; --ks-card-detail-sheet-fact-value-weight: 760; --ks-card-detail-sheet-fact-label-weight: 680; --ks-card-detail-sheet-fact-cell-min-height: 84px; --ks-card-detail-sheet-fact-cell-gap: 7px; --ks-card-detail-action-row-gap: 9px; --ks-card-detail-support-title-size: 15px; --ks-card-detail-support-row-size: 13px; --ks-card-detail-action-height: var(--ks-action-emphasis-height); --ks-card-detail-action-size: var(--ks-action-emphasis-font-size); --ks-card-detail-action-weight: var(--ks-typography-weight-action); /* Web-export adapter for the Today host pattern. Detail-card visuals resolve through component.card.detail; paging and completion chrome resolve through pattern.todayDeck. */ --ks-today-deck-inset-inline: 18px; --ks-today-deck-peek: 20px; --ks-today-deck-gap: 12px; --ks-today-deck-card-width: calc(var(--ks-phone-width) - 18px - 12px - 20px); --ks-today-deck-card-height: 100%; --ks-today-deck-card-radius: var(--ks-card-detail-radius); --ks-today-deck-card-padding-top: 14px; --ks-today-deck-card-padding-inline: 18px; --ks-today-deck-card-padding-bottom: 16px; --ks-today-deck-scroll-fade-size: var(--ks-card-detail-scroll-fade-size); --ks-today-deck-scroll-mask: linear-gradient(180deg, #000 0 calc(100% - var(--ks-today-deck-scroll-fade-size)), transparent 100%); --ks-today-deck-hero-min-height: var(--ks-card-detail-visual-min-height); --ks-today-deck-hero-max-height: 46%; --ks-today-deck-hero-radius: var(--ks-card-detail-visual-radius); --ks-today-deck-accent-ink: var(--ks-card-detail-accent-ink); --ks-today-deck-hero-viz-accent: var(--ks-card-detail-visual-accent); --ks-today-deck-hero-viz-track: var(--ks-card-detail-visual-track); --ks-today-deck-hero-viz-line: var(--ks-card-detail-visual-line); --ks-today-deck-hero-curve-stroke: var(--ks-card-detail-visual-curve-stroke); --ks-today-deck-eyebrow-size: var(--ks-card-detail-connection-size); --ks-today-deck-eyebrow-weight: var(--ks-card-detail-connection-weight); --ks-today-deck-eyebrow-tracking: var(--ks-card-detail-connection-tracking); --ks-today-deck-eyebrow-ink: var(--ks-card-detail-connection-ink); --ks-today-deck-chip-dot-size: var(--ks-card-detail-connection-dot-size); --ks-today-deck-chip-dot-gap: var(--ks-card-detail-connection-dot-gap); --ks-today-deck-title-size: 22px; --ks-today-deck-title-weight: var(--ks-typography-weight-heading); --ks-today-deck-lead-size: var(--ks-card-detail-lead-size); --ks-today-deck-lead-weight: var(--ks-card-detail-lead-weight); --ks-today-deck-lead-leading: var(--ks-card-detail-lead-leading); --ks-today-deck-lead-ink: var(--ks-card-ink); --ks-today-deck-body-size: var(--ks-typography-size-card); --ks-today-deck-fact-value-size: 18px; --ks-today-deck-fact-label-size: var(--ks-typography-size-mini); --ks-today-deck-action-height: var(--ks-action-emphasis-height); --ks-today-deck-action-size: var(--ks-action-emphasis-font-size); --ks-today-deck-dot-size: 6px; --ks-today-deck-dot-gap: 6px; --ks-today-deck-dot-rest: var(--ks-color-border-control); --ks-today-deck-dot-active: var(--ks-color-action-primary-surface); --ks-today-deck-end-surface: var(--ks-color-background-subtle); --ks-today-deck-end-line: var(--ks-color-border-subtle); --ks-today-deck-end-ink: var(--ks-color-text-secondary); --ks-today-deck-dismiss-anchor-x: 0%; --ks-today-deck-dismiss-anchor-y: 0%; --ks-today-deck-lift-offset: 10px; --ks-today-deck-lift-scale: 0.975; --ks-today-deck-advance-duration: var(--ks-motion-sheet); --ks-today-deck-advance-easing: var(--ks-ease-in-out); --ks-today-deck-leave-duration: var(--ks-motion-exit); /* Today brief type: unbolded secondary-ink subtitle above the deck; the deck card title outranks it. */ --ks-today-deck-brief-size: 15px; --ks-today-deck-brief-weight: 460; --ks-today-deck-brief-leading: 1.45; --ks-today-deck-brief-ink: var(--ks-color-text-secondary); /* Source-page aliases used by the Cairn Design Tokens v2 specimen. */ --page-bg: var(--ks-color-background-canvas); --card-bg: var(--ks-color-surface-card); --card-line: var(--ks-color-border-subtle); --field-border: var(--ks-color-border-control); --meta-fg: var(--ks-color-text-secondary); --link-fg: var(--ks-color-accent-connect); --button-primary-bg: var(--ks-color-action-primary-surface); --button-secondary-bg: var(--ks-color-action-subtle-surface); --button-secondary-fg: var(--ks-color-action-primary-surface); --button-secondary-line: var(--ks-color-border-control); --card-data-bg: var(--ks-color-surface-card); --card-data-line: var(--ks-color-border-subtle); --card-data-shadow: var(--ks-shadow-card); --card-action-bg: var(--ks-color-action-subtle-surface); --card-action-line: color-mix(in srgb, var(--ks-color-action-primary-surface) 18%, transparent); --card-action-accent: var(--ks-color-action-primary-surface); --card-action-shadow: var(--ks-shadow-card); --card-decision-bg: var(--ks-color-status-warm-surface); --card-decision-line: color-mix(in srgb, var(--ks-color-status-warm-content) 24%, transparent); --card-decision-accent: var(--ks-color-status-warm-content); --card-decision-shadow: var(--ks-shadow-card); --card-soft-bg: var(--ks-color-status-sage-surface); --card-soft-line: color-mix(in srgb, var(--ks-color-status-sage-content) 18%, transparent); --card-soft-accent: var(--ks-color-status-sage-content); --card-soft-shadow: var(--ks-shadow-card); /* Website iPhone device frame (2026-07-10). */ --ks-website-device-outer-radius: 54px; --ks-website-device-bezel-width: 10px; --ks-website-device-screen-radius: 44px; --ks-website-device-island-width: 120px; --ks-website-device-island-height: 34px; --ks-website-device-bezel-color: var(--ks-color-website-device-bezel); --ks-website-tap-size: 28px; --ks-website-tap-color: var(--ks-color-action-primary-surface); /* Typography primitives. */ --ks-font-ui: var(--ks-font-narrative); --font-ui: var(--ks-font-ui); --ks-font-display: var(--ks-font-narrative); --font-display: var(--ks-font-display); --ks-font-metric: var(--ks-font-evidence); --font-metric: var(--ks-font-metric); --ks-font-website-display: var(--ks-font-narrative); --ks-type-hero: clamp(44px, 7vw, 92px); --type-hero: var(--ks-type-hero); --ks-type-section: clamp(34px, 4.4vw, 62px); --type-section: var(--ks-type-section); --ks-type-phone-title: var(--ks-typography-size-phone-title); --type-phone-title: var(--ks-type-phone-title); --ks-type-sheet-title: var(--ks-typography-size-sheet-title); --type-sheet-title: var(--ks-type-sheet-title); --ks-type-card: var(--ks-typography-size-card); --type-card: var(--ks-type-card); --ks-type-body: var(--ks-typography-size-body); --type-body: var(--ks-type-body); --ks-type-small: var(--ks-typography-size-label); --type-small: var(--ks-type-small); --ks-type-mini: var(--ks-typography-size-mini); --type-mini: var(--ks-type-mini); --ks-weight-website-display: var(--ks-typography-weight-heading); --ks-weight-title: var(--ks-typography-weight-heading); --weight-title: var(--ks-weight-title); --ks-weight-card: var(--ks-typography-weight-strong); --weight-card: var(--ks-weight-card); --ks-weight-action: var(--ks-typography-weight-action); --weight-action: var(--ks-weight-action); --ks-weight-metric: var(--ks-typography-weight-label); --weight-metric: var(--ks-weight-metric); --ks-leading-tight: var(--ks-typography-leading-tight); --ks-leading-copy: var(--ks-typography-leading-copy); --ks-letter: 0; /* Action hierarchy: use emphasis for the page or sheet's limited next-step action; repeated row tools use standard or inline action tokens. */ --ks-action-emphasis-height: 44px; --action-emphasis-height: var(--ks-action-emphasis-height); --ks-action-emphasis-height-large: 52px; --ks-action-emphasis-padding-inline: 18px; --ks-action-emphasis-radius: var(--ks-radius-control); --action-emphasis-radius: var(--ks-action-emphasis-radius); --ks-action-emphasis-bg: var(--ks-color-action-primary-surface); --action-emphasis-bg: var(--ks-action-emphasis-bg); --ks-action-emphasis-on: var(--ks-color-action-primary-content); --action-emphasis-on: var(--ks-action-emphasis-on); --ks-action-emphasis-line: var(--ks-color-transparent); --ks-action-emphasis-shadow: 0 8px 16px color-mix(in srgb, var(--ks-color-action-primary-surface) 18%, transparent); --action-emphasis-shadow: var(--ks-action-emphasis-shadow); --ks-action-emphasis-shadow-strong: 0 8px 16px color-mix(in srgb, var(--ks-color-action-primary-surface) 22%, transparent); --ks-action-emphasis-font-size: 13px; --action-emphasis-font-size: var(--ks-action-emphasis-font-size); --ks-action-emphasis-font-size-large: 14px; --ks-action-emphasis-font-weight: var(--ks-typography-weight-action); --action-emphasis-font-weight: var(--ks-action-emphasis-font-weight); /* Ordinary actions stay light: tinted or transparent surface, thin line, no elevation. */ --ks-action-standard-height: 44px; --ks-action-standard-height-compact: 34px; --action-standard-height-compact: var(--ks-action-standard-height-compact); --ks-action-standard-padding-inline: 12px; --ks-action-standard-radius: 7px; --action-standard-radius: var(--ks-action-standard-radius); --ks-action-standard-bg: color-mix(in srgb, var(--ks-color-action-primary-surface) 7%, transparent); --action-standard-bg: var(--ks-action-standard-bg); --ks-action-standard-bg-hover: color-mix(in srgb, var(--ks-color-action-primary-surface) 11%, transparent); --ks-action-standard-line: color-mix(in srgb, var(--ks-color-action-primary-surface) 18%, transparent); --action-standard-line: var(--ks-action-standard-line); --ks-action-standard-on: var(--ks-color-action-primary-surface); --action-standard-on: var(--ks-action-standard-on); --ks-action-standard-font-size: 12px; --action-standard-font-size: var(--ks-action-standard-font-size); --ks-action-standard-font-size-compact: 11px; --ks-action-standard-font-weight: var(--ks-typography-weight-action); --action-standard-font-weight: var(--ks-action-standard-font-weight); /* Inline actions are repeated tools: compact hit target, subtle surface, no elevation. */ --ks-action-inline-size: 40px; --action-inline-size: var(--ks-action-inline-size); --ks-action-inline-radius: var(--ks-radius-pill); --action-inline-radius: var(--ks-action-inline-radius); --ks-action-inline-bg: color-mix(in srgb, var(--ks-color-action-primary-surface) 7%, transparent); --action-inline-bg: var(--ks-action-inline-bg); --ks-action-inline-bg-hover: color-mix(in srgb, var(--ks-color-action-primary-surface) 12%, transparent); --ks-action-inline-line: var(--ks-action-standard-line); --action-inline-line: var(--ks-action-inline-line); --ks-action-inline-on: var(--ks-color-action-primary-surface); --action-inline-on: var(--ks-action-inline-on); --ks-action-inline-icon-size: 25px; --ks-action-inline-icon-weight: 360; --ks-action-inline-shadow: var(--ks-shadow-none); /* Motion defaults: fast feedback, explicit easing, no transition-all. */ --ks-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ks-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ks-motion-press-scale: 0.97; /* Shared visual assets. */ --ks-hero-image: url("assets/hero-dawn-c.png"); }