/* bon.do brand for Twenty (bondo.crm.bon.do, also crm.bon.do and app.crm.bon.do). Served as /_brand/brand.css by
   twenty-web after the shared twenty.css, which maps the --brand-* properties onto Twenty's theme.
   Sources: bondo-platform/apps/web/src/styles/tokens.css (Day and Night themes: surfaces, ink, borders, signal) and
   src/lib/brand.ts (logo navy #1c1d5b, mint #84ebdf, teal #33a39a). Favicon: apps/web/public/favicon.svg.
   Font: Geist and Geist Mono, self-hosted (twenty.css @font-face), as on the website.

   Besides the accent, this brand replaces Twenty's grey neutrals with the site's cool slate ones, tints shadows with
   navy, rounds controls like the site (6px controls, 10px panels) and gives the app frame behind the sidebar a soft
   teal and navy glow. Text pairs are AA on their surfaces in both themes (README, Workspaces). */
:root {
  --brand-name: "bon.do";
  --brand-favicon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHJ4PSIxNC4wOCIgZmlsbD0iIzBiMWUzZiIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjE1NCA4LjM2OSkgc2NhbGUoMS4xODE1KSI+PHBhdGggZmlsbD0iIzg0ZWJkZiIgZD0iTTkuMDEgMC41SDE1Ljc0TDEyLjU4IDE0Ljc1TDE3LjEzIDIyLjA4SDExLjM5TDkuMDEgMzIuNzdIMTcuMTNMMTIuNTggMzkuNUgwLjVMOS4wMSAwLjVaIi8+PHBhdGggZmlsbD0iIzMzYTM5YSIgZD0iTTIzLjA3IDI3LjYyTDE0Ljc1IDE1LjU1SDIzLjA3TDMxLjM4IDI3LjYyTDIzLjA3IDM5LjVIMTQuNzVMMjMuMDcgMjcuNjJaIi8+PC9nPjwvc3ZnPg==";
  --brand-font-family: "Geist", Inter, sans-serif;
  --brand-code-font-family: "Geist Mono", "DM Mono", monospace;
}

/* Day: --signal, --signal-strong, --signal-ink; pressed in logo navy; bar runs logo navy to signal to mint. */
.light.light {
  --brand-accent: #007c85;
  --brand-accent-hover: #00616a;
  --brand-accent-active: #1c1d5b;
  --brand-accent-text: #00616a;
  --brand-on-accent: #ffffff;
  --brand-bar: linear-gradient(90deg, #1c1d5b, #007c85 55%, #84ebdf);
  /* Slate: the hue and a little of the chroma of the site's --border and --ink-muted. */
  --brand-neutral-hue: 250;
  --brand-neutral-chroma: 0.012;

  /* Surfaces: --surface, then steps toward --surface-sunken and --border. */
  --t-background-primary: #ffffff;
  --t-background-secondary: #fafbfd;
  --t-background-tertiary: #f1f4f8;
  --t-background-quaternary: #e7ecf2;
  --t-background-transparent-secondary: rgb(255 255 255 / 0.6);
  --t-background-transparent-light: rgb(11 30 63 / 0.045);
  --t-background-transparent-lighter: rgb(11 30 63 / 0.025);
  --t-background-transparent-medium: rgb(11 30 63 / 0.08);
  --t-background-noisy: radial-gradient(70rem 40rem at -15% -25%, rgb(0 124 133 / 0.1), transparent 60%),
    radial-gradient(60rem 36rem at 115% -20%, rgb(28 29 91 / 0.08), transparent 60%), #f2f5f9;

  /* Borders: --border, one lighter and one stronger step. */
  --t-border-color-light: #edf1f5;
  --t-border-color-medium: #e1e7ee;
  --t-border-color-strong: #cbd4df;

  /* Ink: --ink, --ink-muted, --ink-subtle (AA on every surface here), and a light step for placeholders. */
  --t-font-color-primary: #0a111a;
  --t-font-color-secondary: #4b5868;
  --t-font-color-tertiary: #5f6c7d;
  --t-font-color-light: #98a4b3;

  /* Shadows in navy instead of black, with a hairline ring instead of a grey border. */
  --t-box-shadow-color: rgb(11 30 63 / 0.06);
  --t-box-shadow-light: 0 1px 2px rgb(11 30 63 / 0.06), 0 0 0 1px rgb(11 30 63 / 0.05);
  --t-box-shadow-strong: 0 18px 44px -12px rgb(11 30 63 / 0.22), 0 4px 12px rgb(11 30 63 / 0.06),
    0 0 0 1px rgb(11 30 63 / 0.06);
  --t-box-shadow-sidebar: 0 0 0 1px rgb(11 30 63 / 0.04);
}

/* Night: --bg, --surface, --surface-raised, --ink, --signal; pressed and bar in logo mint. */
.dark.dark {
  --brand-accent: #2fe0d8;
  --brand-accent-hover: #7bf0eb;
  --brand-accent-active: #84ebdf;
  --brand-accent-text: #7bf0eb;
  --brand-on-accent: #031a1c;
  --brand-bar: linear-gradient(90deg, #33a39a, #2fe0d8 55%, #84ebdf);
  --brand-neutral-hue: 250;
  --brand-neutral-chroma: 0.018;

  --t-background-primary: #0b1016;
  --t-background-secondary: #0d131a;
  --t-background-tertiary: #111821;
  --t-background-quaternary: #17212c;
  --t-background-transparent-secondary: rgb(6 9 13 / 0.55);
  --t-background-transparent-light: rgb(232 238 245 / 0.06);
  --t-background-transparent-lighter: rgb(232 238 245 / 0.035);
  --t-background-transparent-medium: rgb(232 238 245 / 0.1);
  --t-background-noisy: radial-gradient(70rem 40rem at -15% -25%, rgb(47 224 216 / 0.09), transparent 60%),
    radial-gradient(60rem 36rem at 115% -20%, rgb(28 29 91 / 0.45), transparent 60%), #06090d;

  --t-border-color-light: #131b25;
  --t-border-color-medium: #1c2632;
  --t-border-color-strong: #2e3c4d;

  --t-font-color-primary: #e8eef5;
  --t-font-color-secondary: #a9b6c6;
  --t-font-color-tertiary: #8796a9;
  --t-font-color-light: #5c6e84;

  --t-box-shadow-color: rgb(0 0 0 / 0.5);
  --t-box-shadow-light: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(232 238 245 / 0.05);
  --t-box-shadow-strong: 0 18px 44px -12px rgb(0 0 0 / 0.7), 0 0 0 1px #1c2632;
  --t-box-shadow-sidebar: 0 0 0 1px rgb(232 238 245 / 0.04);
}

/* Radii as on the site: 6px controls, 10px panels and menus, 14px large surfaces. */
.light.light,
.dark.dark {
  --t-border-radius-sm: 6px;
  --t-border-radius-md: 10px;
  --t-border-radius-lg: 14px;
}