/* GENERATED from Tiptree design-system v0.6.0 — DO NOT EDIT. */
:root {
  color-scheme: dark;
  --tt-color-bg-primary: var(--tt-stone-950);
  --tt-color-bg-secondary: var(--tt-stone-875);
  --tt-color-bg-tertiary: var(--tt-stone-850);
  --tt-color-bg-ground: var(--tt-stone-1050);
  --tt-color-surface-card: var(--tt-stone-875);
  --tt-color-surface-code: var(--tt-stone-950);
  --tt-color-surface-hover: #ffffff0f;
  --tt-color-row-hover: #ffffff1c;
  --tt-color-surface-open: #ffffff26;
  --tt-color-text-primary: var(--tt-stone-100);
  --tt-color-text-quaternary: var(--tt-stone-500);
  --tt-color-text-secondary: var(--tt-stone-300);
  --tt-color-text-tertiary: var(--tt-stone-400);
  --tt-color-border-interactive: #464641;
  --tt-color-border-primary: var(--tt-stone-750);
  --tt-color-border-section: var(--tt-stone-850);
  --tt-color-border-translucent: #ffffff12;
  --tt-color-accent: var(--tt-teal-400);
  --tt-color-accent-hover: var(--tt-teal-300);
  --tt-color-accent-on-surface: var(--tt-color-accent);
  --tt-color-accent-on-surface-hover: var(--tt-color-accent-hover);
  --tt-color-accent-tint: #1f2928;
  --tt-color-action-danger-bg: var(--tt-color-red);
  --tt-color-action-danger-bg-hover: #d64c4c;
  --tt-color-action-danger-bg-pressed: #c24444;
  --tt-color-action-danger-fg: var(--tt-brand-black);
  --tt-color-action-disabled-bg: #ffffff14;
  --tt-color-link: var(--tt-teal-300);
  --tt-color-highlight: #d6dc85;
  --tt-color-button-invert-bg: var(--tt-stone-200);
  --tt-color-button-invert-fg: var(--tt-brand-black);
  --tt-color-button-secondary-bg: var(--tt-stone-875);
  --tt-color-button-secondary-border: var(--tt-stone-550);
  --tt-color-keycap-bg: var(--tt-stone-700);
  --tt-color-keycap-bg-hover: var(--tt-stone-600);
  --tt-color-focus-ring: var(--tt-teal-400);
  --tt-color-surface-inverse: var(--tt-color-button-invert-bg);
  --tt-color-surface-sunken: var(--tt-stone-1000);
  --tt-color-surface-tooltip: var(--tt-stone-200);
  --tt-color-scrollbar-thumb: #ffffff1a;
  --tt-color-status-success-fg: #6ee7b7;
  --tt-color-status-success-bg: #0f2e1f;
  --tt-color-status-success-bg-emphasis: var(--tt-color-status-success-bg);
  --tt-color-status-success-border: #166534;
  --tt-color-status-danger-fg: #fca5a5;
  --tt-color-status-danger-bg: #2e1414;
  --tt-color-status-danger-border: #7f1d1d;
  --tt-color-status-warning-fg: #fcd34d;
  --tt-color-status-warning-bg: #2a2510;
  --tt-color-status-warning-bg-emphasis: var(--tt-color-status-warning-bg);
  --tt-color-status-warning-border: #78350f;
  --tt-color-status-info-fg: #93c5fd;
  --tt-color-status-info-bg: #152040;
  --tt-color-status-info-border: #1e3a8a;
  --tt-color-text-on-inverse: var(--tt-color-button-invert-fg);
  --tt-color-mark-new: #c47b6e;
  --tt-color-mark-live: var(--tt-teal-300);
  --tt-color-mark-idle: var(--tt-stone-600);
  --tt-color-mark-community: #9a95bd;
  --tt-color-channel-whatsapp: #7fae8c;
  --tt-color-channel-sms: #9db884;
  --tt-shadow-low: 0px 2px 6px -2px #0000002b, 0px 1px 2px #00000022;
  --tt-shadow-medium: 0px 4px 14px -3px #00000036, 0px 1px 3px #00000026;
  --tt-shadow-high: 0px 20px 60px -8px #00000066, 0px 4px 12px #00000038;
  --tt-shadow-lift: 0 2px 6px #00000033, 0 8px 24px #00000047;
}

[data-theme='light'] {
  color-scheme: only light;
  --tt-color-bg-primary: var(--tt-stone-050);
  --tt-color-bg-secondary: var(--tt-stone-150);
  --tt-color-bg-tertiary: var(--tt-stone-200);
  --tt-color-bg-ground: var(--tt-stone-050);
  --tt-color-surface-card: var(--tt-stone-000);
  --tt-color-surface-code: var(--tt-stone-150);
  --tt-color-surface-hover: #1b1b1b0d;
  --tt-color-row-hover: var(--tt-stone-150);
  --tt-color-surface-open: var(--tt-stone-200);
  --tt-color-text-primary: var(--tt-brand-black);
  --tt-color-text-quaternary: var(--tt-stone-550);
  --tt-color-text-secondary: var(--tt-stone-750);
  --tt-color-text-tertiary: var(--tt-stone-650);
  --tt-color-border-interactive: var(--tt-stone-350);
  --tt-color-border-primary: var(--tt-stone-350);
  --tt-color-border-section: var(--tt-stone-250);
  --tt-color-border-translucent: #0000000f;
  --tt-color-accent: var(--tt-teal-550);
  --tt-color-accent-hover: var(--tt-teal-650);
  --tt-color-accent-on-surface: var(--tt-color-accent);
  --tt-color-accent-on-surface-hover: var(--tt-color-accent-hover);
  --tt-color-accent-tint: var(--tt-teal-100);
  --tt-color-action-danger-bg: #b04a3f;
  --tt-color-action-danger-bg-hover: #963f36;
  --tt-color-action-danger-bg-pressed: #7f352e;
  --tt-color-action-danger-fg: var(--tt-stone-000);
  --tt-color-action-disabled-bg: #1b1b1b0f;
  --tt-color-link: var(--tt-teal-600);
  --tt-color-highlight: #8a9132;
  --tt-color-button-invert-bg: var(--tt-brand-black);
  --tt-color-button-invert-fg: var(--tt-brand-white);
  --tt-color-button-secondary-bg: var(--tt-stone-000);
  --tt-color-button-secondary-border: var(--tt-stone-550);
  --tt-color-keycap-bg: var(--tt-stone-450);
  --tt-color-keycap-bg-hover: var(--tt-stone-550);
  --tt-color-focus-ring: #5e9cff;
  --tt-color-surface-inverse: var(--tt-color-button-invert-bg);
  --tt-color-surface-sunken: var(--tt-stone-150);
  --tt-color-surface-tooltip: #000000cc;
  --tt-color-scrollbar-thumb: #0000001a;
  --tt-color-status-success-fg: #047857;
  --tt-color-status-success-bg: #ecfdf5;
  --tt-color-status-success-bg-emphasis: #d1fae5;
  --tt-color-status-success-border: #bbf7d0;
  --tt-color-status-danger-fg: #dc2626;
  --tt-color-status-danger-bg: #fef2f2;
  --tt-color-status-danger-border: #fecaca;
  --tt-color-status-warning-fg: #92400e;
  --tt-color-status-warning-bg: #fffbeb;
  --tt-color-status-warning-bg-emphasis: #fef3c7;
  --tt-color-status-warning-border: #fde68a;
  --tt-color-status-info-fg: #4f46e5;
  --tt-color-status-info-bg: #eef2ff;
  --tt-color-status-info-border: #e2e8f0;
  --tt-color-text-on-inverse: var(--tt-color-button-invert-fg);
  --tt-color-mark-new: #a4564a;
  --tt-color-mark-live: var(--tt-teal-600);
  --tt-color-mark-idle: var(--tt-stone-400);
  --tt-color-mark-community: #6a6499;
  --tt-color-channel-whatsapp: #4e7c5c;
  --tt-color-channel-sms: #63864a;
  --tt-shadow-low: 0px 2px 6px -2px #0000000d, 0px 1px 2px #00000008;
  --tt-shadow-medium: 0px 4px 14px -3px #00000012, 0px 1px 3px #0000000a;
  --tt-shadow-high: 0px 20px 60px -8px #0000001f, 0px 4px 12px #0000000d;
  --tt-shadow-lift: 0 4px 24px #4d4d4706, 0 4px 32px #4d4d4706, 0 16px 32px #4d4d4704;
}