/* The v5 values live here, and only html[data-visual="v5"] hands them to the --ds-* tokens. */
:root {
  --v5-bg: light-dark(#F6F6F6, #151C16);
  --v5-bg-pure: light-dark(#FFFFFF, #1C241D);
  --v5-bg-subtle: light-dark(#FBFBFA, #181F19);
  --v5-text: light-dark(#151C16, #EEF1EC);
  --v5-text-secondary: light-dark(#3D453E, #C9CFC9);
  --v5-text-muted: light-dark(#5E665F, #A3ABA4);
  --v5-border: light-dark(#E4E7E2, #2F3930);
  --v5-border-strong: light-dark(#848B85, #6E786F);
  --v5-positive: light-dark(#446C25, #A9C97A);
  --v5-negative: light-dark(#B3261E, #F2877E);
  --v5-alert: light-dark(#8A5A00, #E9B45C);
  --v5-cta: light-dark(#2E5119, #A9C97A);
  --v5-green-text: light-dark(#446C25, #A9C97A);
  --v5-tint: light-dark(#EEF3E6, #243020);
  --v5-tint-hover: light-dark(#E3EDD5, #2E4121);
  --v5-fill: light-dark(#ECEEEA, #263027);
  --v5-fill-hover: light-dark(#E2E6DF, #303B31);
  --v5-field: light-dark(#EDEEED, #262927);
  /* The Chat conversation is the sidebar a hair off (1.03 against it), as WhatsApp's, and on it the composer pill turns white in the light theme. */
  --v5-bg-chat: light-dark(oklch(96.6% 0.004 145), oklch(16.8% 0.011 145));
  --v5-composer-field-chat: light-dark(#FFFFFF, #262927);
  --v5-tick-read: light-dark(#1F7FB5, #6CC4F0);
  /* Menus float on a neutral graphite a step above the panels; the light one keeps a hairline, since its pages are white. */
  --v5-menu-bg: light-dark(#FFFFFF, #1B1C1B);
  --v5-menu-hover: light-dark(#EFF0EF, #2B2D2B);
  --v5-menu-separator: light-dark(#E2E3E2, #2E302E);
  --v5-menu-border: light-dark(#E2E3E2, transparent);
  /* A modal is a sheet one step above the page, in the menus' graphite so the two floating pieces read as one family; what
     sits on it steps up with it, and its fields sink a step below it (the menu's own ground) to read as fields, not outlines.
     The veil under it is deeper in the dark, where a 50% black barely set the sheet apart. */
  --v5-bg-elevated: light-dark(#FFFFFF, #242524);
  --v5-border-elevated: light-dark(#E4E7E2, #353735);
  --v5-field-elevated: light-dark(#F5F6F5, #1B1C1B);
  --v5-field-border-elevated: light-dark(#848B85, #444644);
  --v5-fill-elevated: light-dark(#ECEEEA, #2F312F);
  --v5-fill-hover-elevated: light-dark(#E2E6DF, #383A38);
  --v5-scrim: light-dark(oklch(0 0 0 / 0.32), oklch(0 0 0 / 0.62));
  /* The tooltip is the other theme's ground (an inverse surface), so it reads apart from any row, hovered or selected. */
  --v5-tooltip-bg: light-dark(#2E372F, #DDE2DA);
  --v5-tooltip-text: light-dark(#F6F6F6, #151C16);
}

html[data-visual="v5"] {
  --visual-bg: var(--v5-bg);
  --visual-bg-conversation: var(--v5-bg);
  --visual-bg-chat: var(--v5-bg-chat);
  --visual-composer-field-chat: var(--v5-composer-field-chat);
  --visual-bg-pure: var(--v5-bg-pure);
  --visual-bg-subtle: var(--v5-bg-subtle);
  --visual-text: var(--v5-text);
  --visual-text-secondary: var(--v5-text-secondary);
  --visual-text-muted: var(--v5-text-muted);
  --visual-border: var(--v5-border);
  --visual-border-strong: var(--v5-border-strong);
  --visual-fill: var(--v5-fill);
  --visual-fill-hover: var(--v5-fill-hover);
  --visual-field: var(--v5-field);
  --visual-highlight-row: var(--ds-cta-soft);
  --visual-positive: var(--v5-positive);
  --visual-negative: var(--v5-negative);
  --visual-alert: var(--v5-alert);
  --visual-focus-ring: var(--ds-cta);
  --visual-link: var(--ds-on-cta-soft);
  --visual-msg-me: var(--ds-cta-soft);
  --visual-msg-me-text: var(--ds-text);
  --visual-msg-me-read: var(--v5-tick-read);
  --visual-menu-bg: var(--v5-menu-bg);
  --visual-menu-text: var(--v5-text);
  --visual-menu-hover: var(--v5-menu-hover);
  --visual-menu-separator: var(--v5-menu-separator);
  --visual-menu-border: var(--v5-menu-border);
  --visual-bg-elevated: var(--v5-bg-elevated);
  --visual-border-elevated: var(--v5-border-elevated);
  --visual-field-elevated: var(--v5-field-elevated);
  --visual-field-border-elevated: var(--v5-field-border-elevated);
  --visual-fill-elevated: var(--v5-fill-elevated);
  --visual-fill-hover-elevated: var(--v5-fill-hover-elevated);
  --visual-scrim: var(--v5-scrim);
  --visual-tooltip-bg: var(--v5-tooltip-bg);
  --visual-tooltip-text: var(--v5-tooltip-text);
}

/* The brand green is the green account's own color; the other eleven keep their computed shades. */
html[data-visual="v5"]:is(:not([data-color]), [data-color=""], [data-color="green"]) {
  --visual-cta: var(--v5-cta);
  --visual-on-cta-soft: var(--v5-green-text);
  --visual-focus-ring: var(--v5-green-text);
  --visual-surface: var(--v5-tint);
  --visual-cta-soft: var(--v5-tint);
  --visual-cta-soft-hover: var(--v5-tint-hover);
  --visual-msg-me: var(--v5-tint-hover);
}