/*
  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
*/
:root {
  color-scheme: light;

  /* Cairn Design Tokens v2: Quartz Tide semantic roles from Token System.dc.html. */
  --bg-canvas: #FFFFFF;
  --bg-subtle: #F6F7F8;
  --surface-card: #FFFFFF;
  --line-soft: #0F171F17;
  --ks-color-line-soft: var(--line-soft);
  --line-control: #A6B0B9;
  --text-primary: #1C232B;
  --text-secondary: #5F6B76;
  --action-fill: #1B788B;
  --action-on: #FFFFFF;
  --action-subtle: #DDF3F6;
  --connect-accent: #5E6EAE;
  --status-sage: #E6F1EA;
  --status-warm: #FFF2D9;
  --night-bg: #142341;
  --night-on: #FAF4E6;

  --status-sage-strong: #143128;
  --status-warm-strong: #352D1F;

  /* Compatibility shims for older Kepsle specimens. Prefer the v2 semantic roles above for new work. */
  --ks-color-sand: var(--bg-subtle);
  --ks-color-paper: var(--bg-canvas);
  --ks-color-paper-warm: var(--surface-card);
  --ks-color-paper-deep: color-mix(in srgb, var(--bg-subtle) 72%, var(--line-soft) 28%);
  --ks-color-ochre: #C98956;
  --ks-color-ochre-text: color-mix(in srgb, var(--ks-color-ochre) 62%, var(--text-primary));
  --ks-color-clay: #C98956;

  /* Nutrition macro palette for the calories screen and food vignettes. */
  --ks-color-food-carb: #72AEC4;
  --ks-color-food-protein: var(--ks-color-ochre);
  --ks-color-food-fat: #8FAA70;
  --ks-color-food-ink: #302820;
  --ks-color-food-muted: #7F7467;
  --ks-color-food-cream: #FFFAF0;
  --ks-color-food-track: #EBE1D2;
  --ks-color-food-ring: #6F8FA6;

  --ks-color-green: var(--status-sage-strong);
  --ks-color-bluegray: var(--line-control);
  --ks-color-indigo: var(--action-fill);
  --ks-color-indigo-2: var(--connect-accent);
  --ks-color-indigo-3: color-mix(in srgb, var(--action-fill) 72%, var(--night-bg) 28%);
  --ks-color-indigo-deep: var(--night-bg);
  --ks-color-ink: var(--text-primary);
  --ks-color-muted: var(--text-secondary);
  --ks-color-line: color-mix(in srgb, var(--line-control) 42%, transparent);
  --ks-color-paper-line: color-mix(in srgb, var(--night-on) 24%, transparent);
  --ks-color-on-dark: var(--night-on);
  --ks-color-on-dark-soft: color-mix(in srgb, var(--night-on) 82%, transparent);
  --ks-color-on-dark-muted: color-mix(in srgb, var(--night-on) 68%, transparent);
  --ks-color-on-dark-line: color-mix(in srgb, var(--night-on) 20%, transparent);

  /* Semantic compatibility aliases. Prefer role names such as action-fill and connect-accent in new specimens. */
  --ks-color-primary: var(--action-fill);
  --ks-color-secondary: var(--status-warm-strong);
  --ks-color-tertiary: var(--status-sage-strong);

  /* Speculative vs confirmed state colors. Shared by nutrition rail, draft meal rows, and draft-then-confirm surfaces. */
  --ks-color-state-eaten: color-mix(in srgb, var(--status-warm-strong) 68%, transparent);
  --ks-color-state-draft: color-mix(in srgb, var(--status-warm-strong) 42%, transparent);
  --ks-color-state-draft-line: color-mix(in srgb, var(--status-warm-strong) 58%, transparent);
  --ks-color-state-landing: var(--action-fill);

  /* 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: var(--ks-material-limestone-mask), 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;

  /* 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(--night-bg);
  --ks-title-tone-minimal-block-b: var(--bg-canvas);
  --ks-title-tone-minimal-block-c: var(--bg-canvas);
  --ks-title-tone-minimal-block-d: var(--bg-canvas);
  --ks-title-tone-minimal-surface-below: var(--bg-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(--night-on);
  --ks-title-tone-minimal-text-soft: color-mix(in srgb, var(--night-on) 82%, transparent);
  --ks-title-tone-minimal-text-muted: color-mix(in srgb, var(--night-on) 64%, transparent);
  --ks-title-tone-minimal-chip-bg: color-mix(in srgb, var(--night-on) 13%, transparent);
  --ks-title-tone-minimal-chip-line: color-mix(in srgb, var(--night-on) 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(--status-warm);
  --ks-title-tone-warm-block-b: color-mix(in srgb, var(--status-warm-strong) 58%, var(--status-warm) 42%);
  --ks-title-tone-warm-block-c: var(--status-sage);
  --ks-title-tone-warm-block-d: color-mix(in srgb, var(--line-control) 68%, var(--bg-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(--text-primary);
  --ks-title-tone-warm-text-soft: color-mix(in srgb, var(--text-primary) 74%, transparent);
  --ks-title-tone-warm-text-muted: color-mix(in srgb, var(--text-primary) 56%, transparent);
  --ks-title-tone-warm-chip-bg: color-mix(in srgb, var(--text-primary) 7%, transparent);
  --ks-title-tone-warm-chip-line: color-mix(in srgb, var(--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(--night-bg);
  --ks-title-tone-neutral-block-b: var(--connect-accent);
  --ks-title-tone-neutral-block-c: var(--status-warm);
  --ks-title-tone-neutral-block-d: color-mix(in srgb, var(--status-sage-strong) 54%, var(--status-sage) 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(--night-on);
  --ks-title-tone-neutral-text-soft: color-mix(in srgb, var(--night-on) 82%, transparent);
  --ks-title-tone-neutral-text-muted: color-mix(in srgb, var(--night-on) 64%, transparent);
  --ks-title-tone-neutral-chip-bg: color-mix(in srgb, var(--night-on) 13%, transparent);
  --ks-title-tone-neutral-chip-line: color-mix(in srgb, var(--night-on) 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(--night-bg);
  --ks-title-tone-restrained-block-b: color-mix(in srgb, var(--night-bg) 74%, var(--action-fill) 26%);
  --ks-title-tone-restrained-block-c: color-mix(in srgb, var(--connect-accent) 64%, var(--bg-subtle) 36%);
  --ks-title-tone-restrained-block-d: color-mix(in srgb, var(--line-control) 72%, var(--bg-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(--night-on);
  --ks-title-tone-restrained-text-soft: color-mix(in srgb, var(--night-on) 82%, transparent);
  --ks-title-tone-restrained-text-muted: color-mix(in srgb, var(--night-on) 64%, transparent);
  --ks-title-tone-restrained-chip-bg: color-mix(in srgb, var(--night-on) 13%, transparent);
  --ks-title-tone-restrained-chip-line: color-mix(in srgb, var(--night-on) 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-type-mini);
  --ks-title-header-eyebrow-weight: 660;
  --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-type-phone-title);
  --ks-title-header-title-weight: var(--ks-weight-title);
  --ks-title-header-title-leading: var(--ks-leading-tight);
  --ks-title-header-title-tracking: var(--ks-letter);
  --ks-title-header-subtitle-size: var(--ks-type-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(--bg-canvas);
  --ks-title-header-eyebrow: var(--text-secondary);
  --ks-title-header-title: var(--text-primary);
  --ks-title-header-subtitle: var(--text-secondary);
  --ks-title-header-divider: var(--line-soft);
  --ks-title-header-divider-size: 1px;
  --ks-title-header-shadow: none;
  --ks-title-header-night-surface: var(--night-bg);
  --ks-title-header-night-eyebrow: color-mix(in srgb, var(--night-on) 72%, transparent);
  --ks-title-header-night-title: var(--night-on);
  --ks-title-header-night-subtitle: color-mix(in srgb, var(--night-on) 82%, transparent);
  --ks-title-header-night-divider: 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(--status-warm) 0%, color-mix(in srgb, var(--status-warm) 54%, var(--action-fill) 46%) 34%, color-mix(in srgb, var(--connect-accent) 50%, var(--status-warm) 50%) 66%, var(--connect-accent) 100%);
  --ks-title-header-gouache-scrim: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--text-primary) 14%, transparent) 100%);
  --ks-title-header-gouache-eyebrow: color-mix(in srgb, var(--text-primary) 66%, transparent);
  --ks-title-header-gouache-title: var(--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(--night-bg) 88%, var(--bg-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));

  /* 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(--surface-card) 90%, transparent);
  --ks-today-card-default: var(--surface-card);
  --today-card-default: var(--ks-today-card-default);
  --ks-today-card-decision: var(--status-warm);
  --today-card-decision: var(--ks-today-card-decision);
  --ks-today-card-invite: var(--status-sage);
  --today-card-invite: var(--ks-today-card-invite);
  --ks-today-card-recap: var(--night-bg);
  --today-card-recap: var(--ks-today-card-recap);
  --ks-today-ink: var(--text-primary);
  --ks-today-ink-strong: var(--text-primary);
  --ks-today-ink-soft: color-mix(in srgb, var(--text-primary) 62%, transparent);
  --ks-today-ink-muted: color-mix(in srgb, var(--text-primary) 52%, transparent);
  --ks-today-line: color-mix(in srgb, var(--line-control) 22%, transparent);
  --ks-today-line-soft: color-mix(in srgb, var(--line-soft) 44%, transparent);
  --ks-today-decision-line: color-mix(in srgb, var(--status-warm-strong) 24%, transparent);
  --ks-today-default-line: color-mix(in srgb, var(--action-fill) 18%, transparent);
  --ks-today-green-line: color-mix(in srgb, var(--status-sage-strong) 22%, transparent);
  --ks-today-on-dark: var(--night-on);
  --ks-today-button-dark: var(--action-fill);
  --ks-today-button-dark-hover: color-mix(in srgb, var(--action-fill) 78%, var(--night-bg) 22%);
  --ks-today-button-on-dark: var(--action-on);
  --ks-today-control-line: color-mix(in srgb, var(--line-control) 18%, transparent);
  --ks-today-invite-line: color-mix(in srgb, var(--status-sage-strong) 18%, transparent);
  --ks-today-avatar-shadow: color-mix(in srgb, var(--status-sage-strong) 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(--action-fill);
  --ks-today-button-primary-on: var(--action-on);
  --ks-today-button-chat-bg: var(--action-fill);
  --ks-today-button-chat-on: var(--action-on);
  --ks-today-button-secondary-bg: color-mix(in srgb, var(--surface-card) 72%, transparent);
  --ks-today-button-secondary-on: var(--action-fill);
  --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: 12px;
  --ks-today-card-gap: 8px;
  --ks-today-card-radius: var(--ks-radius-card);
  --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: 13px;
  --ks-today-atom-leading: 1.2;
  --ks-today-atom-weight: 540;
  --ks-today-atom-max-lines: 2;
  --ks-today-descriptor-size: 10.5px;
  --ks-today-descriptor-leading: 1.25;
  --ks-today-descriptor-weight: 500;
  --ks-today-descriptor-max-lines: 1;
  --ks-today-action-height: 28px;
  --ks-today-action-gap: 8px;
  --ks-today-viz-size: 42px;
  --ks-today-viz-stroke: 2px;
  --ks-today-viz-dot-size: 6px;
  --ks-today-viz-sparkline-height: 28px;

  /* Action suggestion cards use a shared low-intrusion dismiss 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-paper) 28%);
  --ks-suggestion-dismiss-badge-bg-hover: color-mix(in srgb, var(--ks-today-card-invite) 68%, var(--ks-color-paper) 32%);
  --ks-suggestion-dismiss-badge-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(--surface-card);
  --ks-today-viz-paper-warm: var(--bg-subtle);
  --ks-today-viz-food-base: color-mix(in srgb, var(--status-warm) 42%, var(--surface-card) 58%);
  --ks-today-viz-track: color-mix(in srgb, var(--line-control) 14%, transparent);
  --ks-today-viz-track-soft: color-mix(in srgb, var(--line-control) 10%, transparent);
  --ks-today-viz-track-strong: color-mix(in srgb, var(--line-control) 26%, transparent);
  --ks-today-viz-light-soft: color-mix(in srgb, var(--surface-card) 38%, transparent);
  --ks-today-viz-light: color-mix(in srgb, var(--surface-card) 48%, transparent);
  --ks-today-viz-light-strong: color-mix(in srgb, var(--surface-card) 82%, transparent);
  --ks-today-viz-food-shadow: color-mix(in srgb, var(--status-warm-strong) 8%, transparent);
  --ks-today-viz-food-fill-top: color-mix(in srgb, var(--status-warm-strong) 70%, var(--status-warm) 30%);
  --ks-today-viz-food-fill-bottom: color-mix(in srgb, var(--status-warm-strong) 58%, var(--status-warm) 42%);
  --ks-today-viz-mood-soft: color-mix(in srgb, var(--connect-accent) 28%, transparent);
  --ks-today-viz-mood-strong: color-mix(in srgb, var(--connect-accent) 78%, transparent);
  --ks-today-viz-meal-soft: color-mix(in srgb, var(--status-sage-strong) 22%, transparent);
  --ks-today-viz-meal-line: color-mix(in srgb, var(--status-sage-strong) 10%, transparent);
  --ks-today-viz-meal-strong: color-mix(in srgb, var(--status-sage-strong) 62%, transparent);

  --today-card-recap-on: var(--night-on);

  /* 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(--surface-card) 94%, var(--bg-subtle) 6%);
  --ks-module-card-surface-lead: linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 96%, white 4%), color-mix(in srgb, var(--surface-card) 90%, var(--action-fill) 10%));
  --ks-module-card-surface-note: color-mix(in srgb, var(--surface-card) 86%, var(--status-sage) 14%);
  --ks-module-card-surface-control: color-mix(in srgb, var(--surface-card) 72%, transparent);
  --ks-module-card-line: color-mix(in srgb, var(--line-control) 18%, transparent);
  --ks-module-card-line-soft: color-mix(in srgb, var(--line-soft) 48%, transparent);
  --ks-module-card-line-on-tone: color-mix(in srgb, var(--night-on) 36%, transparent);
  --ks-module-card-shadow: 0 12px 28px color-mix(in srgb, var(--night-bg) 8%, transparent);
  --ks-module-card-shadow-lead: 0 16px 34px color-mix(in srgb, var(--night-bg) 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: 560;
  --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(--surface-card) 92%, transparent);
  --ks-app-nav-line: var(--line-soft);
  --ks-app-nav-shadow: 0 12px 28px color-mix(in srgb, var(--night-bg) 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(--text-primary) 50%, transparent);
  --ks-app-nav-active: var(--action-fill);
  --ks-app-nav-icon-size: 21px;
  --ks-app-nav-icon-stroke: 1.9;
  --ks-app-nav-label-size: 10px;
  --ks-app-nav-label-weight: 520;
  --ks-app-nav-label-active-weight: 560;
  --ks-app-nav-label-leading: 1.32;

  /* 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(--surface-card) 96%, transparent);
  --ks-quick-chat-surface-line: color-mix(in srgb, var(--line-control) 16%, transparent);
  --ks-quick-chat-surface-shadow: 0 18px 44px color-mix(in srgb, var(--night-bg) 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(--text-primary) 72%, transparent);
  --ks-quick-chat-answer-size: 11.5px;
  --ks-quick-chat-answer-weight: 610;
  --ks-quick-chat-answer-color: color-mix(in srgb, var(--text-primary) 74%, transparent);
  --ks-quick-chat-answer-bg: color-mix(in srgb, var(--bg-subtle) 82%, transparent);
  --ks-quick-chat-answer-line: color-mix(in srgb, var(--line-control) 13%, transparent);
  --ks-quick-chat-input-height: 44px;
  --ks-quick-chat-input-bg: color-mix(in srgb, var(--bg-subtle) 74%, transparent);
  --ks-quick-chat-placeholder-color: color-mix(in srgb, var(--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: 600;
  --ks-chat-thread-weight-meta: 500;
  --ks-chat-thread-weight-strong: 580;
  --ks-chat-thread-weight-support: 500;
  --ks-chat-thread-weight-emphasis: 540;
  --ks-chat-thread-weight-badge: 560;
  --ks-chat-thread-weight-recipe-title: 580;
  --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: 540;
  --ks-chat-inline-card-primary-weight-compact: 520;
  --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: 520;
  --ks-chat-inline-card-media-size-full: 60px;
  --ks-chat-inline-card-media-size-compact: 48px;
  --ks-chat-inline-card-max-actions: 2;

  /* Centered card-detail overlay contract: explains a tapped card without becoming a full module surface. */
  --ks-card-detail-inset-inline: 18px;
  --ks-card-detail-max-height: 438px;
  --ks-card-detail-edge-clearance: 132px;
  --ks-card-detail-padding-top: 10px;
  --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: 20px;
  --ks-card-detail-title-leading: 1.1;
  --ks-card-detail-title-weight: 580;
  --ks-card-detail-body-size: 12px;
  --ks-card-detail-body-leading: 1.4;
  --ks-card-detail-body-weight: 460;
  --ks-card-detail-fact-value-size: 17px;
  --ks-card-detail-fact-label-size: 10.5px;
  --ks-card-detail-support-title-size: 15px;
  --ks-card-detail-support-row-size: 12.5px;
  --ks-card-detail-action-height: 44px;
  --ks-card-detail-action-size: 13px;
  --ks-card-detail-action-weight: 540;
  --ks-card-detail-max-actions: 2;
  --ks-card-detail-visible-support-groups: 1;
  --ks-card-detail-visible-fact-cells: 3;

  /* Source-page aliases used by the Cairn Design Tokens v2 specimen. */
  --page-bg: var(--bg-canvas);
  --card-bg: var(--surface-card);
  --card-line: var(--line-soft);
  --field-border: var(--line-control);
  --meta-fg: var(--text-secondary);
  --link-fg: var(--connect-accent);
  --button-primary-bg: var(--action-fill);
  --button-secondary-bg: var(--action-subtle);
  --button-secondary-fg: var(--action-fill);
  --button-secondary-line: var(--line-control);
  --card-data-bg: var(--surface-card);
  --card-data-line: var(--line-soft);
  --card-data-shadow: var(--ks-shadow-card);
  --card-action-bg: var(--action-subtle);
  --card-action-line: color-mix(in srgb, var(--action-fill) 18%, transparent);
  --card-action-accent: var(--action-fill);
  --card-action-shadow: var(--ks-shadow-card);
  --card-decision-bg: var(--status-warm);
  --card-decision-line: color-mix(in srgb, var(--status-warm-strong) 24%, transparent);
  --card-decision-accent: var(--status-warm-strong);
  --card-decision-shadow: var(--ks-shadow-card);
  --card-soft-bg: var(--status-sage);
  --card-soft-line: color-mix(in srgb, var(--status-sage-strong) 18%, transparent);
  --card-soft-accent: var(--status-sage-strong);
  --card-soft-shadow: var(--ks-shadow-card);

  /* Typography primitives. */
  --ks-font-ui: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  --font-ui: var(--ks-font-ui);
  --ks-font-display: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  --font-display: var(--ks-font-display);
  --ks-font-metric: Avenir, "Avenir Next", "Helvetica Neue", sans-serif;
  --font-metric: var(--ks-font-metric);

  --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: 30px;
  --type-phone-title: var(--ks-type-phone-title);
  --ks-type-sheet-title: 27px;
  --type-sheet-title: var(--ks-type-sheet-title);
  --ks-type-card: 14px;
  --type-card: var(--ks-type-card);
  --ks-type-body: 16px;
  --type-body: var(--ks-type-body);
  --ks-type-small: 12px;
  --type-small: var(--ks-type-small);
  --ks-type-mini: 11px;
  --type-mini: var(--ks-type-mini);

  /* Typography weights and rhythm. */
  --ks-weight-title: 580;
  --weight-title: var(--ks-weight-title);
  --ks-weight-card: 560;
  --weight-card: var(--ks-weight-card);
  --ks-weight-action: 560;
  --weight-action: var(--ks-weight-action);
  --ks-weight-metric: 460;
  --weight-metric: var(--ks-weight-metric);

  --ks-leading-tight: 1.02;
  --ks-leading-copy: 1.58;

  --ks-letter: 0;

  /* Shape tokens. */
  --ks-radius-card: 8px;
  --radius-card: var(--ks-radius-card);
  --ks-radius-control: 6px;
  --radius-control: var(--ks-radius-control);
  --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);

  /* Spacing scale. */
  --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);

  /* Device frame size. */
  --ks-phone-width: 390px;
  --ks-phone-height: 844px;

  /* Elevation tokens. */
  --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);

  /* 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(--action-fill);
  --action-emphasis-bg: var(--ks-action-emphasis-bg);
  --ks-action-emphasis-on: var(--action-on);
  --action-emphasis-on: var(--ks-action-emphasis-on);
  --ks-action-emphasis-line: transparent;
  --ks-action-emphasis-shadow: 0 8px 16px color-mix(in srgb, var(--action-fill) 18%, transparent);
  --action-emphasis-shadow: var(--ks-action-emphasis-shadow);
  --ks-action-emphasis-shadow-strong: 0 8px 16px color-mix(in srgb, var(--action-fill) 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-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(--action-fill) 7%, transparent);
  --action-standard-bg: var(--ks-action-standard-bg);
  --ks-action-standard-bg-hover: color-mix(in srgb, var(--action-fill) 11%, transparent);
  --ks-action-standard-line: color-mix(in srgb, var(--action-fill) 18%, transparent);
  --action-standard-line: var(--ks-action-standard-line);
  --ks-action-standard-on: var(--action-fill);
  --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-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(--action-fill) 7%, transparent);
  --action-inline-bg: var(--ks-action-inline-bg);
  --ks-action-inline-bg-hover: color-mix(in srgb, var(--action-fill) 12%, transparent);
  --ks-action-inline-line: var(--ks-action-standard-line);
  --action-inline-line: var(--ks-action-inline-line);
  --ks-action-inline-on: var(--action-fill);
  --action-inline-on: var(--ks-action-inline-on);
  --ks-action-inline-icon-size: 25px;
  --ks-action-inline-icon-weight: 360;
  --ks-action-inline-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-fast: 150ms;
  --ks-motion-sheet: 220ms;
  --ks-motion-page: 520ms;
  --ks-motion-press-scale: 0.97;

  /* Shared visual assets. */
  --ks-hero-image: url("assets/hero-dawn-c.png");
}