:root {
  --ds-brand-1: #151C16;
  --ds-brand-2: #2E5119;
  --ds-brand-3: #446C25;
  --ds-brand-4: #5F8633;
  --ds-brand-5: #7DA245;
  --ds-brand-6: #F6F6F6;

  --ds-text: var(--visual-text, var(--txt));
  --ds-text-secondary: var(--visual-text-secondary, var(--txt-secondary));
  --ds-text-muted: var(--visual-text-muted, var(--txt-muted));
  --ds-text-on-accent: color(from var(--accent) srgb-linear
    clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
    clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
    clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
  --ds-bg: var(--visual-bg, var(--color-bg));
  --ds-bg-pure: var(--visual-bg-pure, var(--bg-pure));
  --ds-bg-subtle: var(--visual-bg-subtle, var(--bg-subtle));
  --ds-bg-sidebar: var(--sidebar-bg);
  --ds-bg-conversation: var(--visual-bg-conversation, var(--color-lch-white));
  --ds-bg-chat: var(--visual-bg-chat, var(--ds-bg-conversation));
  --ds-bg-raised: var(--bg-raised);
  /* The modal's sheet and the steps on it: outside the v5 they are the page's own. */
  --ds-bg-elevated: var(--visual-bg-elevated, var(--ds-bg-pure));
  --ds-border-elevated: var(--visual-border-elevated, var(--ds-border));
  --ds-field-elevated: var(--visual-field-elevated, var(--ds-field));
  --ds-field-border-elevated: var(--visual-field-border-elevated, var(--ds-border-strong));
  --ds-fill-elevated: var(--visual-fill-elevated, var(--ds-fill));
  --ds-fill-hover-elevated: var(--visual-fill-hover-elevated, var(--ds-fill-hover));
  --ds-surface: var(--visual-surface, var(--surface));
  --ds-hover: var(--hover);
  --ds-fill: var(--visual-fill, var(--hover));
  --ds-fill-hover: var(--visual-fill-hover, var(--surface));
  --ds-field: var(--visual-field, var(--ds-fill));
  --ds-composer-field: var(--ds-field);
  --ds-composer-field-chat: var(--visual-composer-field-chat, var(--ds-composer-field));
  --ds-wallpaper-ink: color-mix(in srgb, var(--ds-text) 6%, transparent);
  --ds-media-badge: var(--media-badge);
  --ds-on-media: var(--on-media);
  --ds-highlight-row: var(--visual-highlight-row, var(--ds-fill));
  --ds-border: var(--visual-border, var(--color-border));
  --ds-border-strong: var(--visual-border-strong, var(--border-strong));
  --ds-divider: var(--topbar-divider);
  --ds-accent: var(--accent);
  --ds-accent-soft: var(--accent-soft);
  --ds-accent-hover: var(--accent-hover);
  --ds-accent-strong: var(--accent-strong);
  --ds-link: var(--visual-link, var(--color-link));
  --ds-positive: var(--visual-positive, var(--color-positive));
  --ds-negative: var(--visual-negative, var(--color-negative));
  --ds-alert: var(--visual-alert, var(--color-alert));
  --ds-focus-ring: var(--visual-focus-ring, var(--ds-cta));
  --ds-caret: var(--ds-cta);
  --ds-msg-me: var(--visual-msg-me, var(--msg-me));
  --ds-msg-me-text: var(--visual-msg-me-text, var(--msg-me-text));
  --ds-msg-me-read: var(--visual-msg-me-read, var(--msg-me-tick-read));
  --ds-msg-in: var(--msg-in);
  --ds-msg-in-text: var(--msg-in-text);
  --ds-msg-note: var(--msg-note);
  --ds-msg-note-text: var(--msg-note-text);
  --ds-warning: var(--warning);
  --ds-warning-text: var(--warning-text);
  --ds-scrim: var(--visual-scrim, var(--scrim));
  --ds-panel-band: var(--panel-band);
  --ds-note: var(--cs-note);
  --ds-note-soft: var(--cs-note-soft);
  --ds-account: var(--accent);
  --ds-account-soft: var(--accent-soft);
  --ds-account-strong: var(--accent-strong);
  --ds-cta: var(--visual-cta, light-dark(var(--accent-strong), var(--accent)));
  --ds-cta-hover: light-dark(
    color-mix(in oklab, var(--accent-strong) 88%, color(from var(--accent-strong) srgb-linear
      calc(1 - clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1))
      calc(1 - clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1))
      calc(1 - clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)))),
    color-mix(in oklab, var(--accent) 88%, color(from var(--accent) srgb-linear
      calc(1 - clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1))
      calc(1 - clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1))
      calc(1 - clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)))));
  /* White or black by the fill's luminance: below 0.1791 white passes, above it black does. */
  --ds-on-cta: light-dark(
    color(from var(--accent-strong) srgb-linear
      clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)),
    color(from var(--accent) srgb-linear
      clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)));
  --ds-cta-soft: var(--visual-cta-soft, light-dark(oklch(from var(--accent) 0.93 min(c, 0.04) h), oklch(from var(--accent) 0.27 min(c, 0.04) h)));
  --ds-cta-soft-hover: var(--visual-cta-soft-hover, light-dark(oklch(from var(--accent) 0.89 min(c, 0.05) h), oklch(from var(--accent) 0.32 min(c, 0.05) h)));
  --ds-on-cta-soft: var(--visual-on-cta-soft, light-dark(oklch(from var(--accent) 0.40 min(c, 0.12) h), oklch(from var(--accent) 0.88 min(c, 0.06) h)));
  --ds-pressed: color-mix(in oklch, var(--ds-text) 12%, transparent);
  /* Every dropdown and popover wears one skin: a panel, the hover a pill inset inside it, a hairline between groups. */
  --ds-menu-bg: var(--visual-menu-bg, var(--popover));
  --ds-menu-text: var(--visual-menu-text, var(--popover-foreground));
  --ds-menu-hover: var(--visual-menu-hover, var(--cs-float-hover));
  --ds-menu-separator: var(--visual-menu-separator, var(--cs-float-divider));
  --ds-menu-border: var(--visual-menu-border, var(--border));
  /* Its own fill, never a step of the page's: over a hovered or selected row those steps are the row's own colour. */
  --ds-tooltip-bg: var(--visual-tooltip-bg, var(--ds-fill-hover));
  --ds-tooltip-text: var(--visual-tooltip-text, var(--ds-text));

  --ds-font-ui: var(--font-corpo);
  --ds-font-brand: var(--font-marca);
  --ds-font-mono: var(--font-mono);
  --ds-font-emoji: var(--font-emoji);
  --ds-font-size-2xs: 0.6875rem;
  --ds-font-size-xs: var(--text-xs);
  --ds-font-size-compact: 0.8125rem;
  --ds-font-size-composer: 16px;
  --ds-status-font: 13px;
  --ds-status-font-xs: 11px;
  --ds-status-font-sm: 12px;
  --ds-emoji-reaction-size: 22px;
  --ds-media-max-inline: min(330px, 68vw);
  --ds-media-ratio-min: 0.75;
  --ds-media-ratio-max: 4;
  --ds-media-frame: 3px;
  --ds-font-size-sm: var(--text-sm);
  --ds-font-size-base: var(--text-base);
  --ds-font-size-lg: var(--text-lg);
  --ds-font-size-xl: var(--text-xl);
  --ds-font-size-2xl: var(--text-2xl);
  --ds-font-size-3xl: var(--text-3xl);
  --ds-info-title: var(--ds-font-size-sm);
  --ds-info-value: var(--ds-font-size-sm);
  --ds-info-label: var(--ds-font-size-compact);
  --ds-info-leading: 1.4;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  --ds-radius-none: 0;
  --ds-radius-sm: var(--radius-sm);
  --ds-radius-md: var(--radius-md);
  --ds-radius-lg: var(--radius-lg);
  --ds-radius-xl: var(--radius-xl);
  --ds-radius-2xl: var(--radius-2xl);
  --ds-radius-3xl: var(--radius-3xl);
  --ds-radius-bubble: 16px;
  --ds-radius-bubble-tail: 4px;
  --ds-radius-full: 999px;
  --ds-menu-radius: 16px;
  --ds-menu-item-radius: 10px;
  --ds-notice-radius: 10px;

  --ds-space-1: calc(var(--spacing) * 1);
  --ds-space-2: calc(var(--spacing) * 2);
  --ds-space-3: calc(var(--spacing) * 3);
  --ds-space-4: calc(var(--spacing) * 4);
  --ds-space-6: calc(var(--spacing) * 6);
  --ds-space-8: calc(var(--spacing) * 8);
  /* What content keeps from a rounded surface's edge, straight or curved. */
  --ds-curve-gap: 12px;
  --ds-modal-radius: var(--ds-radius-3xl);
  /* A modal's edge on its four sides: the least that leaves its content's corner --ds-curve-gap away from the arc (r - (r - gap) / sqrt 2). */
  --ds-modal-pad: max(var(--ds-curve-gap), round(up, var(--ds-modal-radius) - (var(--ds-modal-radius) - var(--ds-curve-gap)) * 0.7072, 1px));
  --ds-modal-gap: var(--ds-space-3);

  --ds-nav-height: var(--nav-height);
  --ds-width-reading: 30rem;
  --ds-composer-height: 52px;
  --ds-composer-control: 36px;
  --ds-composer-inset: 10px;
  --ds-composer-bar-control: 28px;
  --ds-search-height: 34px;
  --ds-search-font-size: 14px;
  --ds-menu-inset: 6px;
  --ds-menu-item-height: 40px;
  --ds-menu-choice-height: 32px;
  --ds-status-height: 24px;
  --ds-status-height-sm: 20px;
  --ds-status-height-xs: 18px;
  --ds-notice-padding-block: 7px;
  --ds-notice-padding-inline: 11px;
  --ds-side-panel-width: 340px;
  --ds-safe-top: var(--safe-top);

  --ds-z-raised: 1;
  --ds-z-sticky: 10;
  --ds-z-dropdown: 20;
  --ds-z-menu: 30;
  --ds-z-busy: 40;
  --ds-z-overlay: 60;
  --ds-z-slideover: 100;

  --ds-duration-fast: 100ms;
  --ds-duration: var(--default-transition-duration);
  --ds-duration-slow: 300ms;
  --ds-duration-pop: 380ms;

  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --ds-ease-pop: linear(0, 0.136, 0.4, 0.657, 0.849, 0.968, 1.026, 1.045, 1.043, 1.031, 1.019, 1.009, 1.003, 0.999, 0.998, 1);
}