/* TitrateLab canonical light tokens. Warm neutral selected for the private preview, 2026-10-04.
 * Edit design values here. Load after legacy page/family styles.
 * Fonts: load ../reskin-typography-20261002/fonts.css in the document head.
 * No legacy --tl-paper, --blue or --cyan aliases belong in this file.
 */
html[data-tl-theme="light"] {
  color-scheme: light;

  /* Surfaces. Source documents, images and exported labels are not UI surfaces. */
  --tl-surface-page: #eeedea;
  --tl-surface-panel: #f6f5f1;
  --tl-surface-raised: #e5edf3;
  --tl-surface-inset: #d6e5f1;
  --tl-surface-quiet: #eeefed;
  --tl-surface-deep: #163e68;
  --tl-surface-deep-end: #1c4e83;

  --tl-text: #0b1d30;
  --tl-text-secondary: #33485d;
  --tl-text-muted: #435b70;
  --tl-text-inverse: #f2f7fc;
  --tl-action: #174fa8;
  --tl-action-hover: #123f86;
  --tl-action-soft: #d6e5f1;
  --tl-on-action: #ffffff;

  /* Primary controls are neutral; blue remains the link/selection role. */
  --tl-button-bg: #f6f5f1;
  --tl-button-ink: #0b1d30;
  --tl-button-border: #697987;
  --tl-button-hover: #e8ecee;
  --tl-button-pressed: #dce3e8;

  /* Dividers and control boundaries are deliberately different roles. */
  --tl-border: #c1cbd3;
  --tl-border-subtle: #d5dbdf;
  --tl-border-control: #697987;
  --tl-focus: #475569;
  --tl-focus-width: 3px;
  --tl-focus-offset: 3px;

  /* Status colours always accompany a text label or explanation. */
  --tl-success: #19623e;
  --tl-success-bg: #e6f4ec;
  --tl-warning: #7e4a00;
  --tl-warning-bg: #fbf1e1;
  --tl-danger: #a83124;
  --tl-danger-bg: #fcebe7;
  --tl-disabled-bg: #e1e6e8;
  --tl-disabled-text: #435b70;

  /* These pinned local families supersede the early Satoshi specimen. */
  --tl-font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tl-font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --tl-body-size: 16px;
  --tl-body-leading: 1.6;
  --tl-heading-weight: 600;
  --tl-heading-leading: 1.13;
  --tl-heading-tracking: -.035em;
  --tl-title-size: clamp(32px, 4vw, 54px);
  --tl-section-title-size: clamp(25px, 2.7vw, 34px);
  --tl-subtitle-size: 20px;
  --tl-control-size: 16px;
  --tl-control-weight: 500;
  --tl-button-size: 15px;
  --tl-label-size: 14px;
  --tl-note-size: 14px;

  --tl-control-height: 48px;
  --tl-compact-target: 44px;
  --tl-control-padding-x: 18px;
  --tl-radius-sm: 6px;
  --tl-radius: 10px;
  --tl-radius-lg: 16px;
  --tl-space-1: 4px;
  --tl-space-2: 8px;
  --tl-space-3: 12px;
  --tl-space-4: 16px;
  --tl-space-5: 24px;
  --tl-space-6: 32px;
  --tl-space-7: 48px;
  --tl-space-8: 64px;
  --tl-layout-max: 1240px;
  --tl-layout-gutter: clamp(20px, 4.5vw, 72px);
  --tl-reading-max: 65ch;
  --tl-header-height: 68px;

  --tl-shadow: 0 2px 4px rgba(16,42,77,.025), 0 20px 48px -30px rgba(16,42,77,.2);
  --tl-shadow-overlay: 0 24px 80px -24px rgba(16,42,77,.32);
  --tl-overlay-backdrop: rgba(11,29,48,.48);
  --tl-motion: 160ms ease;
}