/* 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.
   --brand-bar may be a gradient.

   A workspace may also replace Twenty's neutrals (surfaces, borders, text, shadows, radii, the app frame
   --t-background-noisy) by setting those --t-* properties itself in .light.light and .dark.dark; brand/bondo/brand.css
   does. A workspace that does not keeps Twenty's grey.

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

/* Self-hosted brand fonts (k8s/base/brand/fonts, served by twenty-web). A browser only downloads a face that some
   rule uses, so declaring them here costs workspaces on other fonts nothing. Copied from bondo-platform/apps/web
   (src/styles/global.css). */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/_brand/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/_brand/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/_brand/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/_brand/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.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);
  --t-code-font-family: var(--brand-code-font-family, "DM Mono", monospace);
}

/* Rendering polish for every workspace: grayscale antialiasing, aligned digits in tables and number fields, and thin
   scrollbars in the theme's border colour. No layout changes. */
html body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
table,
[role="table"],
[role="grid"],
input[type="number"] {
  font-variant-numeric: tabular-nums;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--t-border-color-strong) transparent;
}

/* Neutral tint. Twenty paints most chrome (app background, sidebar, dividers, icons) straight from its 12-step grey
   scale. Each step is rebuilt here in OKLCH with Twenty's own lightness (measured from v2.57.1) and the workspace's
   --brand-neutral-hue and --brand-neutral-chroma; without them (chroma 0) the steps equal Twenty's grey. */
.light.light {
  --t-color-gray1: oklch(100.0% 0 var(--brand-neutral-hue, 0));
  --t-gray-scale-gray1: oklch(100.0% 0 var(--brand-neutral-hue, 0));
  --t-color-gray2: oklch(99.1% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray2: oklch(99.1% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray3: oklch(98.2% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray3: oklch(98.2% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray4: oklch(95.8% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray4: oklch(95.8% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray5: oklch(94.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray5: oklch(94.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray6: oklch(87.6% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray6: oklch(87.6% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray7: oklch(84.5% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray7: oklch(84.5% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray8: oklch(76.7% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray8: oklch(76.7% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray9: oklch(68.3% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray9: oklch(68.3% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray10: oklch(61.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray10: oklch(61.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray11: oklch(51.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray11: oklch(51.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray12: oklch(32.1% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray12: oklch(32.1% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
}
.dark.dark {
  --t-color-gray1: oklch(20.5% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray1: oklch(20.5% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray2: oklch(22.2% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray2: oklch(22.2% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray3: oklch(21.3% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray3: oklch(21.3% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray4: oklch(23.1% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray4: oklch(23.1% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray5: oklch(25.2% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray5: oklch(25.2% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray6: oklch(40.2% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray6: oklch(40.2% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray7: oklch(41.7% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray7: oklch(41.7% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray8: oklch(51.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray8: oklch(51.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray9: oklch(60.3% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray9: oklch(60.3% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray10: oklch(58.3% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray10: oklch(58.3% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray11: oklch(76.7% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray11: oklch(76.7% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-color-gray12: oklch(94.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
  --t-gray-scale-gray12: oklch(94.0% var(--brand-neutral-chroma, 0) var(--brand-neutral-hue, 0));
}

/* 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;
}