/* GENERATED from design/tokens.json by scripts/gen_tokens.py — do not edit by hand. */
:root {
  /* colour */
  --c-accent: #6B1E2E;   /* ACCENT */
  --c-accent-dark: #52131F;   /* pressed state — not in the prototype, needed for real buttons */
  --c-accent-tint: rgba(234,47,92,0.10);   /* ACCENT_LIGHT — pink on purpose, see README of the design map */
  --c-accent-tint-mid: rgba(234,47,92,0.20);   /* ACCENT_MID */
  --c-compat-track: rgba(234,47,92,0.08);   /* compatibility bar background */
  --c-bg: #F8F3EE;   /* BG */
  --c-ink: #1A1A1A;   /* headings, names */
  --c-ink-2: #333333;   /* unread message line */
  --c-ink-3: #555555;   /* inactive filter chip text */
  --c-muted: #888888;
  --c-muted-2: #999999;   /* story caption */
  --c-muted-3: #AAAAAA;   /* inactive segment, hints */
  --c-muted-4: #BBBBBB;   /* read message line, sub-caption */
  --c-muted-5: #CCCCCC;   /* location in a row */
  --c-muted-6: #DDDDDD;   /* chevron */
  --c-verified-photo: #5BD8FF;   /* tick over a photo, with a glow */
  --c-verified-row: #22C0F0;   /* tick in a list row */
  --c-nope: #D94040;
  --c-star: #C49A3A;
  --c-like: #4ADE80;   /* LIKE stamp only */

  /* glass — five levels, each a different amount of let-through */
  --glass-panel-bg: rgba(255,255,255,0.60);
  --glass-panel-blur: 24px;
  --glass-panel-line: rgba(255,255,255,0.88);
  --glass-panel-shadow: 0 4px 24px rgba(80,20,40,0.06), inset 0 1.5px 1.5px rgba(255,255,255,0.9);
  --glass-card-bg: rgba(255,255,255,0.78);
  --glass-card-blur: 20px;
  --glass-card-line: rgba(255,255,255,0.92);
  --glass-card-shadow: 0 8px 32px rgba(80,20,40,0.07), inset 0 1.5px 0 rgba(255,255,255,1);
  --glass-float-bg: rgba(255,255,255,0.72);
  --glass-float-blur: 20px;
  --glass-float-line: rgba(255,255,255,0.85);
  --glass-float-shadow: 0 16px 34px -8px rgba(31,8,15,0.12), inset 0 1.5px 1.5px rgba(255,255,255,0.8);
  --glass-pill-bg: rgba(255,255,255,0.55);
  --glass-pill-blur: 12px;
  --glass-pill-line: rgba(255,255,255,0.80);
  --glass-pill-shadow: none;
  --glass-pill-dark-bg: rgba(0,0,0,0.30);
  --glass-pill-dark-blur: 14px;
  --glass-pill-dark-line: rgba(255,255,255,0.22);
  --glass-pill-dark-shadow: none;

  /* radius */
  --r-logo: 11px;
  --r-tile: 12px;
  --r-panel: 16px;
  --r-bubble: 20px;
  --r-topbar: 26px;
  --r-card: 32px;
  --r-nav: 33px;
  --r-pill: 999px;

  /* size */
  --s-shell-max: 430px;
  --s-gutter: 16px;
  --s-topbar-h: 52px;
  --s-logo: 36px;
  --s-logo-icon: 15px;
  --s-nav-h: 72px;
  --s-nav-icon-box: 44px;
  --s-nav-icon-on: 22px;
  --s-nav-icon-off: 20px;
  --s-card-filter-btn: 40px;
  --s-card-filter-icon: 17px;
  --s-action-sm: 56px;
  --s-action-lg: 68px;
  --s-action-icon-sm: 22px;
  --s-action-icon-lg: 28px;
  --s-action-gap: 24px;
  --s-card-info-bottom: 110px;
  --s-card-actions-bottom: 24px;
  --s-photo-bar-h: 3px;
  --s-photo-bar-on: 22px;
  --s-photo-bar-off: 6px;
  --s-avatar-match: 66px;
  --s-avatar-row: 58px;
  --s-avatar-story: 58px;
  --s-avatar-empty-chat: 96px;
  --s-unread: 24px;
  --s-compat-h: 6px;
  --s-bubble-max-pct: 75;

  /* type */
  --t-card-name: 32px;
  --t-profile-name: 30px;
  --t-screen-title: 26px;
  --t-chat-name: 20px;
  --t-row-name: 17px;
  --t-row-name-sm: 16px;
  --t-location: 16px;
  --t-body: 15px;
  --t-row-sub: 14px;
  --t-chip: 13px;
  --t-section-label: 12px;
  --t-badge: 11px;
  --t-line-height-display: 1.1;

  /* motion */
  --m-swipe-threshold: 90;
  --m-rotate-max: 16deg;
  --m-rotate-at-px: 220;
  --m-stamp-from: 25;
  --m-stamp-to: 90;
  --m-exit-x: 460;
  --m-exit-rotate: 25deg;
  --m-exit: 350ms;
  --m-exit-timer: 360ms;
  --m-under-card-scale: 0.93;
  --m-under-card-y: 16;
  --m-under-card-opacity: 0.4;
  --m-compat: 800ms;
  --m-compat-delay: 100ms;
  --m-stagger-matches: 50ms;
  --m-stagger-messages: 55ms;
  --m-star: 500ms;
  --m-star-ease: cubic-bezier(0.4,0,0.8,1);
  --m-tab-flash: 450ms;
  --m-tab-fade: 180ms;
  --m-header-morph: 220ms;
}

/* Ambient orbs, fixed behind everything (prototype: three radial-gradient circles). */
.guli-orbs {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle 250px at calc((-100px) + 250px) calc((-140px) + 250px), rgba(234,47,92,0.07) 0%, transparent 70%),
    radial-gradient(circle 210px at calc(100% - (-100px) - 210px) calc(28% + 210px), rgba(200,130,160,0.10) 0%, transparent 70%),
    radial-gradient(circle 190px at calc(5% + 190px) calc(100% - 8% - 190px), rgba(210,170,200,0.08) 0%, transparent 70%);
  background-repeat: no-repeat;
}