/* Токены продукта. Порождены из канона, руками не правятся. */
/* Отпечаток канона: 65efebbfbadf85b9fa473d7b81f3c4eaab8f0bcede472b67562cf069f4c53fa9 */

:root {
  --color-mint: #61ffbb;
  --color-tile: #b2ffde;
  --on-mint: #151b28;
  --color-brand: #006a74;
  --grad-brand: radial-gradient(circle at 50% 50%,
    #070c16 0%, #006a74 12%, #c2fff9 78%);
  --color-accent: var(--color-mint);
  --color-accent-hover: color-mix(in srgb, var(--color-accent), white 16%);
  --color-accent-press: color-mix(in srgb, var(--color-accent), black 20%);
  --color-notify: var(--color-mint);
  --color-online: var(--color-mint);
  --color-profile: var(--color-mint);
  --color-live: #ff2d55;
  --color-video: #ff3b30;
  --color-servers: #5e5ce6;
  --color-social: #af52de;
  --color-idle: #ff9f0a;
  --color-offline: #86868b;
  --grad-avatar: radial-gradient(120% 130% at 88% -18%, rgb(255 255 255 / .28), transparent 56%),
    linear-gradient(152deg, color-mix(in srgb, var(--color-profile) 58%, var(--bg)), var(--color-profile));
  --scrim-bottom: linear-gradient(to top,
    rgba(0,0,0,.68) 0%, rgba(0,0,0,.52) 12%, rgba(0,0,0,.37) 25%, rgba(0,0,0,.24) 39%,
    rgba(0,0,0,.14) 54%, rgba(0,0,0,.07) 71%, rgba(0,0,0,.02) 87%, rgba(0,0,0,0) 100%);
  --scrim-top: linear-gradient(to bottom,
    rgba(0,0,0,.50) 0%, rgba(0,0,0,.37) 15%, rgba(0,0,0,.25) 31%, rgba(0,0,0,.15) 48%,
    rgba(0,0,0,.08) 66%, rgba(0,0,0,.03) 83%, rgba(0,0,0,0) 100%);
  --scrim-tile: linear-gradient(180deg, rgba(8,8,10,.28) 0%, rgba(8,8,10,.66) 100%);
  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont,
               "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue",
               ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  --font-display: "Manrope", var(--font-sans);
  --text-display: 2rem;
  --text-display-lh: 2.25rem;
  --text-display-ls: -.021em;
  --text-display-fw: 700;
  --text-title: 1.5rem;
  --text-title-lh: 1.85rem;
  --text-title-ls: -.017em;
  --text-title-fw: 650;
  --text-heading: 1.125rem;
  --text-heading-lh: 1.5rem;
  --text-heading-ls: -.011em;
  --text-heading-fw: 600;
  --text-body: .9375rem;
  --text-body-lh: 1.45rem;
  --text-body-ls: -.003em;
  --text-label: .8125rem;
  --text-label-lh: 1.15rem;
  --text-label-ls: 0em;
  --text-caption: .75rem;
  --text-caption-lh: 1rem;
  --text-caption-ls: .002em;
  --radius-md: .5rem;
  --radius-lg: .625rem;
  --radius-xl: .875rem;
  --radius-2xl: 1.125rem;
  --radius-3xl: 1.5rem;
  --radius-nav: 10px;
  --radius-btn: 10px;
  --radius-card: 25px;
  --radius-card-lg: 30px;
  --radius-pill: 999px;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --duration: .15s;
}

.dark {
  --bg: #070c16;
  --rail: #151b28;
  --surface: #151b28;
  --field: #10141d;
  --surface-2: #191e29;
  --surface-3: #272d3a;
  --surface-4: #323745;
  --border-card: #1f2739;
  --grad-aside: linear-gradient(90deg, #070c1600 0%, #27447c33 100%);
  --btn-ghost-bg: #ffffff0d;
  --nav-active-bg: #32374566;
  --nav-hover-bg: #32374599;
  --nav-active-mark: var(--text);
  --nav-icon-active-bg: #323745;
  --text: #dee1ff;
  --text-muted: #9194ab;
  --text-subtle: #7b7e93;
  --hairline: #ffffff1a;
  --hairline-strong: #ffffff29;
  --hairline-dark: #00000024;
  --overlay: #0000009e;
  --danger: #ff4d4d;
  --danger-soft: #ff4d4d29;
  --success: #34d17a;
  --success-soft: #34d17a29;
  --warning: #ffb020;
  --warning-soft: #ffb02029;
  --elev-sm: 0 1px 2px #0006;
  --elev-md: 0 6px 20px #00000073, 0 2px 6px #00000059;
  --elev-lg: 0 16px 44px #0000008c, 0 6px 14px #0006;
  --elev-pop: 0 12px 38px #0000009e, 0 4px 10px #00000073;
  --scrollbar-thumb: #ffffff24;
  --scrollbar-thumb-hover: #ffffff47;
}

.light {
  --bg: #f3f3f5;
  --rail: #eaeaee;
  --surface: #fff;
  --surface-2: #ededf1;
  --surface-3: #e3e3e9;
  --surface-4: #d9d9e1;
  --field: var(--surface-2);
  --border-card: var(--surface-3);
  --grad-aside: none;
  --btn-ghost-bg: var(--surface-2);
  --nav-active-bg: var(--surface-2);
  --nav-hover-bg: var(--surface-3);
  --nav-active-mark: var(--text);
  --nav-icon-active-bg: var(--surface-4);
  --text: #17171a;
  --text-muted: #5d5d67;
  --text-subtle: #86868f;
  --hairline: #00000017;
  --hairline-strong: #00000029;
  --hairline-dark: #00000024;
  --overlay: #14141873;
  --danger: #dc2626;
  --danger-soft: #dc26261f;
  --success: #16a34a;
  --success-soft: #16a34a1f;
  --warning: #d97706;
  --warning-soft: #d9770624;
  --elev-sm: 0 1px 2px #11111a0f, 0 1px 1px #11111a0a;
  --elev-md: 0 4px 12px #11111a14, 0 2px 4px #11111a0d;
  --elev-lg: 0 12px 32px #11111a1f, 0 6px 12px #11111a0f;
  --elev-pop: 0 10px 34px #11111a29, 0 3px 8px #11111a14;
  --scrollbar-thumb: #0000002e;
  --scrollbar-thumb-hover: #00000052;
}

.wireframe {
  --bg: #f4f4f5;
  --rail: #fafafa;
  --surface: #fff;
  --surface-2: #ececee;
  --surface-3: #e0e0e3;
  --surface-4: #d4d4d8;
  --field: var(--surface-2);
  --border-card: var(--surface-3);
  --grad-aside: none;
  --btn-ghost-bg: var(--surface-2);
  --nav-active-bg: var(--surface-2);
  --nav-hover-bg: var(--surface-3);
  --nav-active-mark: var(--text);
  --nav-icon-active-bg: var(--surface-4);
  --text: #1c1c1e;
  --text-muted: #6b6b70;
  --text-subtle: #9a9aa0;
  --hairline: #00000024;
  --hairline-strong: #00000042;
  --hairline-dark: #00000024;
  --overlay: #0006;
  --danger: #3a3a3d;
  --danger-soft: #00000014;
  --success: #4d4d52;
  --success-soft: #0000000f;
  --warning: #5f5f64;
  --warning-soft: #0000000d;
  --elev-sm: none;
  --elev-md: none;
  --elev-lg: none;
  --elev-pop: none;
  --color-accent: #2a2a2e;
  --color-live: #3a3a3d;
  --color-video: #3a3a3d;
  --color-servers: #3a3a3d;
  --color-social: #3a3a3d;
  --color-notify: #3a3a3d;
  --color-online: #4d4d52;
  --color-profile: #3a3a3d;
  --color-idle: #86868b;
  --color-offline: #b8b8bd;
  --color-mint: #4d4d52;
  --color-tile: #e0e0e3;
  --on-mint: #1c1c1e;
  --grad-brand: radial-gradient(circle at 50% 50%, #6b6b70 0%, #9a9aa0 12%, #d4d4d8 78%);
  --scrollbar-thumb: #0000002e;
  --scrollbar-thumb-hover: #00000052;
}