/* GENERATED FILE, DO NOT EDIT. Run `npm run tokens:web`.
 *
 * Source: design/tokens.json, the same file src/theme/tokens.generated.ts comes
 * from. If the site and the app ever look like different products, this file is
 * stale, not wrong.
 *
 * System: Signal on Neutral, iOS system greys carry the chrome, and hue is reserved for meaning: coral is the one call to act, drawn from one ramp whose step 500 is the logo, sage is presence, and the wallet balance takes a hue only at its two ends (green at an hour or more, red under ten minutes) and is neutral between. Nothing else gets a hue. Renamed from "Warm Signal", which described a warm paper base that no longer exists, a system whose name asserts a fact about its own palette has to be renamed when that fact changes.
 */

:root {
  color-scheme: light dark;

  --bg-base: #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-sunken: #E5E5EA;
  --bg-hover: #DEDEE3;
  --bg-grouped: #F2F2F7;
  --bg-chrome: rgba(255,255,255,0.80);
  --bg-glass: rgba(255,255,255,0.55);
  --bg-pressed: #D1D1D6;
  --bg-selected: #D1D1D6;
  --bg-inverse: #1C1C1E;
  --bg-scrim: #000000;
  --bg-accent: #C2401F;
  --bg-accent-strong: #C2401F;
  --bg-accent-gradient-from: #C2401F;
  --bg-accent-gradient-to: #832B15;
  --bg-accent-tint: #FFE9E3;
  --bg-nav-indicator: #FFD2C6;
  --bg-listener: #FFDDEF;
  --bg-astrologer: #EBE0FF;
  --bg-positive: #DCE8E3;
  --bg-token-healthy: #0B5F36;
  --bg-token-critical: #B3261E;
  --text-primary: #1C1C1E;
  --text-secondary: #55555A;
  --text-tertiary: #78787D;
  --text-section: #6A6F72;
  --text-muted: #8E8E93;
  --text-accent: #C2401F;
  --text-nav-selected: #692110;
  --text-on-accent: #FFFFFF;
  --text-on-accent-tint: #692110;
  --text-on-state: #FFFFFF;
  --text-on-inverse: #FFFFFF;
  --text-positive: #1F4A3F;
  --text-rating: #B7791F;
  --text-on-listener: #841660;
  --text-listener: #C93B98;
  --text-astrologer: #5B21B6;
  --text-on-astrologer: #5B21B6;
  --text-on-token-strong: #FFFFFF;
  --border-hairline: #C6C6C8;
  --border-strong: #C7C7CC;
  --border-accent: #C2401F;
  --state-available: #12946A;
  --text-available: #10855F;
  --bg-available: #10855F;
  --state-danger: #733635;
  --text-destructive: #E91646;
  --text-warning: #8C6200;
  --mark-talk: #E0245E;
  --mark-listen: #1D6FE0;
  --mark-vent: #C25E00;
  --mark-share: #7A3DE0;
  --mark-unwind: #0F7F62;
  --mark-verified: #006AFF;
  --bubble-mine: #C2401F;
  --bubble-theirs: #FFFFFF;
  --bubble-text: #FFFFFF;
  --bubble-meta: rgba(255,255,255,0.8);
  --bubble-tick-read: #FFFFFF;
  --bubble-wallpaper: #F5F1EB;
  --media-scrim: rgba(0,0,0,0.55);
  --media-meta: rgba(255,255,255,0.72);
  --media-uploading: rgba(0,0,0,0.28);
  --media-tick-read: #FFFFFF;

  --space-hair: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 56px;
  --space-6xl: 64px;

  --layout-rowoneline: 56px;
  --layout-rowtwoline: 72px;
  --layout-rowthreeline: 88px;
  --layout-field: 56px;
  --layout-toolbarheight: 64px;
  --layout-appbarsmall: 64px;
  --layout-appbarmedium: 112px;
  --layout-appbarmediumsubtitle: 128px;
  --layout-bubbleminheight: 30px;
  --layout-bottombarinsetmin: 15px;
  --layout-bottombarinsetmax: 60px;

  --radius-tail: 5px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-screen: 44px;
  --radius-pressbutton: 14px;
  --radius-presscard: 12px;
  --radius-presssend: 9px;
  --radius-field: 10px;
  --radius-alert: 14px;
  --radius-bubble: 20px;
  --radius-thread: 24px;
  --radius-sheet: 20px;

  /* Same families as the app, different loading rule.
   *
   * On the web Geist arrives as a variable font from Google Fonts, so a
   * weight axis is honest. In the app the faces are separate static files
   * and asking for a weight makes Android synthesise one it already has,
   * which is why the app names a face per style and forbids fontWeight.
   * Titan One is the wordmark only — one weight, same as assets/fonts. */
  --face-wordmark: 'Titan One', system-ui, sans-serif;
  --face-display: 'Geist', system-ui, sans-serif;
  --face-title: 'Geist', system-ui, sans-serif;
  --face-label: 'Geist', system-ui, sans-serif;
  --face-body: 'Geist', system-ui, sans-serif;

  /* The springs, as the closest thing CSS has. A spring is not expressible as a
   * cubic bezier, so these approximate the settle of each one rather than
   * pretending to be it, the app owns the real physics.
   *
   * There is deliberately no bounce curve here. The app's bounce is a spring
   * driving a discrete event (a message leaving), where overshoot is the
   * physics. On the web the only animated thing is a button press, and a press
   * that springs *past* its target and comes back is backwards: you are pushing
   * something down, not throwing it. It also reads as dated, which is what
   * impeccable's bounce-easing rule is about. Exponential deceleration is what
   * a pressed surface actually does. */
  --ease-snap: cubic-bezier(0.32, 0.72, 0.31, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 170ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
}

@media (prefers-color-scheme: dark) {
  :root {
  --bg-base: #1E1E1E;
  --bg-raised: #242626;
  --bg-sunken: #282828;
  --bg-hover: #2E2E2E;
  --bg-grouped: #1E1E1E;
  --bg-chrome: rgba(30,30,30,0.85);
  --bg-glass: rgba(40,40,40,0.55);
  --bg-pressed: #363636;
  --bg-selected: #363636;
  --bg-inverse: #E9E9E9;
  --bg-scrim: #000000;
  --bg-accent: #C2401F;
  --bg-accent-strong: #C2401F;
  --bg-accent-gradient-from: #C2401F;
  --bg-accent-gradient-to: #832B15;
  --bg-accent-tint: #49170A;
  --bg-nav-indicator: #692110;
  --bg-listener: #631F4A;
  --bg-astrologer: #452F70;
  --bg-positive: #16302A;
  --bg-token-healthy: #0E7A45;
  --bg-token-critical: #8C1D18;
  --text-primary: #FFFFFF;
  --text-secondary: #949494;
  --text-tertiary: #757575;
  --text-section: #949494;
  --text-muted: #696969;
  --text-accent: #F88468;
  --text-nav-selected: #FFB19D;
  --text-on-accent: #FFFFFF;
  --text-on-accent-tint: #F88468;
  --text-on-state: #0A1F14;
  --text-on-inverse: #1E1E1E;
  --text-positive: #A8D8C8;
  --text-rating: #F6C453;
  --text-on-listener: #FED8EC;
  --text-listener: #F061BA;
  --text-astrologer: #A78BFA;
  --text-on-astrologer: #E5D4FF;
  --text-on-token-strong: #FFFFFF;
  --border-hairline: #3D3D3D;
  --border-strong: #484848;
  --border-accent: #C2401F;
  --state-available: #3FD69B;
  --text-available: #3FD69B;
  --bg-available: #3FD69B;
  --state-danger: #E39B92;
  --text-destructive: #E91646;
  --text-warning: #F0A800;
  --mark-talk: #E0245E;
  --mark-listen: #1D6FE0;
  --mark-vent: #C25E00;
  --mark-share: #7A3DE0;
  --mark-unwind: #0F7F62;
  --mark-verified: #4291FF;
  --bubble-mine: #C2401F;
  --bubble-theirs: #242626;
  --bubble-text: #FFFFFF;
  --bubble-meta: rgba(255,255,255,0.8);
  --bubble-tick-read: #FFFFFF;
  --bubble-wallpaper: #0A0A0A;
  --media-scrim: rgba(0,0,0,0.55);
  --media-meta: rgba(255,255,255,0.72);
  --media-uploading: rgba(0,0,0,0.28);
  --media-tick-read: #FFFFFF;
  }
}