/* Generated by scripts/gen-tokens from docs/design/one-app/tokens.json. Do not edit; change the JSON and run it. */

:root {
  --bg: #0E0D0C;
  --panel: #161513;
  --hover: #1E1C1A;
  --rule: #2B2926;
  --rule-strong: #3A3733;
  --text: #F1EEE6;
  --text-2: #B3AEA4;
  --label: #8C877D;
  --primary-bg: #F1EEE6;
  --primary-hover: #FFFFFF;
  --primary-ink: #0E0D0C;
  --focus: #F1EEE6;
  --signal-wash: rgba(241,238,230,0.12);
  --del-wash: rgba(140,135,125,0.14);
  --code-bg: #121110;
  --scrim: rgba(0,0,0,0.62);
  --mark-wire: #F1EEE6;
  --mark-dot: #F1EEE6;
  --beacon-ink: #B8A4FF;
  --beacon-dot: #B8A4FF;
  --beacon-badge-ink: #0E0D0C;
  --float: inset 0 1px 0 rgba(241,238,230,0.06), 0 24px 48px -24px rgba(0,0,0,0.6);
  --popover: inset 0 1px 0 rgba(241,238,230,0.05), 0 12px 24px -12px rgba(0,0,0,0.55);
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --radius-chip: 4px;
  --radius-field: 8px;
  --radius-button: 8px;
  --radius-button-touch: 10px;
  --radius-card: 12px;
  --radius-card-phone: 10px;
  --radius-sheet: 14px;
  --radius-bubble: 12px;
  --radius-full: 999px;
  --size-meta: 12px; --line-meta: 16px;
  --size-base: 13px; --line-base: 18px;
  --size-read: 15px; --line-read: 22px;
  --size-title: 20px; --line-title: 26px;
  --size-hero: 28px; --line-hero: 34px;
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --control-xs: 28px;
  --control-sm: 32px;
  --control-touch: 44px;
  --control-touch-lg: 54px;
  --motion-tap: 120ms;
  --motion-panel: 220ms;
  --motion-sheet: 280ms;
  --motion-reveal: 150ms;
  --motion-hold: 600ms;
  --motion-undo: 4000ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  color-scheme: dark;
}
:root[data-theme="paper"] {
  --bg: #F4F1EA;
  --panel: #FBFAF6;
  --hover: #EEEAE2;
  --rule: #DCD7CC;
  --rule-strong: #C9C3B7;
  --text: #141311;
  --text-2: #4A463F;
  --label: #6B665D;
  --primary-bg: #141311;
  --primary-hover: #4A463F;
  --primary-ink: #F4F1EA;
  --focus: #141311;
  --signal-wash: rgba(20,19,17,0.10);
  --del-wash: rgba(107,102,93,0.10);
  --code-bg: #F0EDE5;
  --scrim: rgba(20,19,17,0.34);
  --mark-wire: #141311;
  --mark-dot: #141311;
  --beacon-ink: #5B3FC4;
  --beacon-dot: #5B3FC4;
  --beacon-badge-ink: #F4F1EA;
  --float: 0 24px 48px -24px rgba(20,19,17,0.28);
  --popover: 0 12px 24px -12px rgba(20,19,17,0.3);
  color-scheme: light;
}
/* On a phone (under 720 wide, or a phone in landscape) the read and title steps are larger (iOS body
   size, no zoom on focus). */
@media (max-width: 719px), (max-height: 500px) and (pointer: coarse) {
  :root {
    --size-read: 17px; --line-read: 24px;
    --size-title: 22px; --line-title: 28px;
  }
}