/* Shared brand layer for Twenty, loaded on every host before the host's brand.css (k8s/base/web.conf). It maps the
   --brand-* properties a workspace sets in brand/<workspace>/brand.css onto Twenty's own theme properties, so no rule
   here depends on Twenty's generated class names.

   Twenty (v2.57.1) defines its theme as custom properties on html.light and html.dark (the radix "blue" scale is the
   accent: buttons, checkboxes, focus outlines, links, tags). .light.light and .dark.dark outrank Twenty's .light and
   .dark, also inside its @supports (display-p3) blocks, whatever order the stylesheets load in.

   A workspace sets, per theme (.light.light and .dark.dark):
     --brand-accent         solid accent: buttons, checkboxes, focus outline, accent text
     --brand-accent-hover   hover on a solid accent
     --brand-accent-active  pressed solid accent
     --brand-accent-text    accent text (radix step 11)
     --brand-on-accent      text on a solid accent
     --brand-bar            the 3px bar at the top of the page
   and once, on :root: --brand-name, --brand-favicon (read by brand.js) and optionally --brand-font-family.

   Contrast: every pair is AA in both themes (README, Workspaces). Check visually after every Twenty upgrade. */

.light.light,
.dark.dark {
  --brand-tint: color-mix(in srgb, var(--brand-accent) var(--brand-tint-amount), var(--t-background-primary));
  --brand-tint-strong: color-mix(in srgb, var(--brand-accent) 16%, var(--t-background-primary));
  --brand-border: color-mix(in srgb, var(--brand-accent) 45%, var(--t-background-primary));

  --t-color-blue: var(--brand-accent);
  --t-color-blue1: var(--brand-tint);
  --t-color-blue3: var(--brand-tint);
  --t-color-blue5: var(--brand-tint-strong);
  --t-color-blue6: var(--brand-border);
  --t-color-blue7: var(--brand-border);
  --t-color-blue8: var(--brand-border);
  --t-color-blue9: var(--brand-accent);
  --t-color-blue10: var(--brand-accent-hover);
  --t-color-blue11: var(--brand-accent-text);
  --t-color-blue12: var(--brand-accent-active);
  --t-color-transparent-blue2: color-mix(in srgb, var(--brand-accent) 8%, transparent);
  --t-background-transparent-blue: color-mix(in srgb, var(--brand-accent) 12%, transparent);
  --t-border-color-blue: var(--brand-border);

  --t-accent-accent9: var(--brand-accent);
  --t-accent-accent10: var(--brand-accent-hover);
  --t-accent-accent11: var(--brand-accent-text);
  --t-accent-primary: var(--brand-tint-strong);
  --t-accent-secondary: var(--brand-tint-strong);
  --t-accent-tertiary: var(--brand-tint);
  --t-accent-quaternary: var(--brand-tint);

  --t-font-color-on-accent: var(--brand-on-accent);
  --t-font-family: var(--brand-font-family, Inter, sans-serif);
}

/* Tint behind accent text (tags, selected rows): light enough in light, dark enough in dark, for AA. */
.light.light {
  --brand-tint-amount: 7%;
}
.dark.dark {
  --brand-tint-amount: 12%;
}

/* Twenty writes #fff as the text colour of solid accent buttons instead of using --t-font-color-on-accent. Brands with
   a light accent in dark mode need dark text there. Data attributes, not generated classes. */
.light.light [data-color="accent"][data-variant="solid"],
.dark.dark [data-color="accent"][data-variant="solid"] {
  --tw-button-color: var(--brand-on-accent);
}

/* Twenty's global body rule writes "Inter, sans-serif" literally; most components use --t-font-family. */
html body {
  font-family: var(--t-font-family);
}

.light.light ::selection,
.dark.dark ::selection {
  background-color: var(--brand-tint-strong);
  color: var(--t-font-color-primary);
}

/* Brand bar: fixed and outside the layout, so it never adds a scrollbar or moves Twenty's own elements. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-bar, transparent);
  z-index: 2147483647;
  pointer-events: none;
}