/*
 * Brand theme — every token a brand overrides: all colour tokens, --font-family and logo sizes.
 * Static CSS served from public/brand/, NOT processed by webpack; linked from public/index.html.
 * Declared on html:root (specificity 0,1,1) so it beats any :root (0,1,0) that webpack injects
 * later, regardless of stylesheet order. Non-brand tokens (radii, transitions, font sizes,
 * chart metrics, shadows) stay in src/styles/common/variables.sass.
 * Contract: docs/white-label/brand-pack-contract.md
 */

html:root {
  /* colors */
  --black: #000000;
  --white: #FFFFFF;
  --white-dark: #F2F4F8;
  --ultra-light: #E7E9EF;
  --light: #C8CCD9;
  --gray: #A0ABC4;
  --gray-dark: #6E7A9A;
  --gray-dark-light: #D7DAE3;
  --gray-light: #F8FAFB;
  --gray-ultra-light: #ECEFF3;
  --dark: #0D122E;
  --dark-transparent: rgba(0, 0, 0, 0.04);
  --brand: #3652F1;
  --brand-transparent: #3652F1b5;
  --brand-light: #809CFF;
  --brand-light-transparent: #809CFFb5;
  --brand-dark-light: #1A31B4;
  --brand-semi-light: #222E67;
  --brand-dark: #192354;
  --brand-semi-dark: #18214E;
  --brand-mega-dark: #151D45;
  --brand-ultra-dark: #11183A;
  --brand-ultra-dark-transparent: rgba(17, 24, 59, 0.5);
  --brand-shadow-color: rgba(54, 82, 241, 0.3);
  --red: #be4680;
  --red-light: #DB81A7;
  --android-green: #a4c639;
  --green: #24AA8F;
  --green-dark: #17823B;
  --green-dark-transparent: rgb(23, 130, 59, 0.1);
  --red-lighter: #D25973;
  --red-attention: #EB5757;
  --disabled-background: #F5F7FA;
  --disabled-text: var(--gray-dark);
  --disabled-border: #E4E7ED;
  --funnels-current-visual: #3247A8;
  --funnels-previous-visual: rgba(50, 71, 168, 0.5);
  --retention-table-cell-color-rgb: 50, 71, 168;

  /* font */
  --font-family: 'Cera Pro', sans-serif;

  /* logo sizes (logo/main.svg in the app header, logo/auth.svg in the auth header) */
  --header-logo-padding: 0 20px 0 18px;
  --logo-main-width: 90px;
  --logo-main-height: 30px;
  --logo-main-width-mobile: 66px;
  --logo-auth-width: 98px;

  /* background colors */
  --background-neutral-white: #FFFFFF;
  --background-neutral-black: #0D122E;
  --background-secondary-default: #AABBCF;
  --background-neutral-white-hover: #DCE2FD;
  --background-neutral-white-pressed: #C0CDFD;
  --background-primary-soft-default: #DCE2FD;
  --background-primary-soft-hover: #C0CDFD;
  --background-primary-soft-pressed: #95AEFB;
  --background-primary-bold-pressed: #2122AC;
  --background-primary-default: #3652F1;
  --background-secondary-soft-default: #EBF0F4;
  --background-secondary-soft-disabled: #F4F7F9;
  --background-secondary-soft-hover: #DAE3EB;
  --background-secondary-soft-pressed: #C3D1DE;
  --background-success-default: #3EC372;
  --background-success-soft-default: #E0F8E9;
  --background-warning-default: #F0851F;
  --background-warning-soft-default: #FDF0D7;
  --background-error-soft-default: #FDE3E3;
  --background-error-default: #EB5757;
  /* darkened background/error/default; the design system has no hover token for it yet */
  --background-error-hover: #D34E4E;
  --background-fuschsia-soft-default: #F7ECFB;

  /* text colors */
  --text-primary-default: #3652F1;
  --text-primary-disabled: #95AEFB;
  --text-primary-hover: #1A31B4;
  --text-primary-soft-default: #C0CDFD;
  --text-secondary-default: #6E7A9A;
  --text-secondary-hover: #58627B;
  --text-secondary-disabled: #AABBCF;
  --text-secondary-pressed: #4B5364;
  --text-neutral-white: #FFFFFF;
  --text-neutral-black: #0D122E;
  --text-neutral-disabled: #94A4C0;
  --text-success-default: #3EC372;
  --text-error-default: #EB5757;
  --text-warning-default: #E16A15;
  --text-warning-hover: #BB5013;

  /* icon colors */
  --icon-primary-default: #3652F1;
  --icon-primary-hover: #2127D4;
  --icon-neutral-primary: #181853;
  --icon-neutral-black: #0D122E;
  --icon-secondary-default: #94A4C0;
  --icon-secondary-hover: #6E7A9A;
  --icon-secondary-light-defualt: #AABBCF;
  --icon-success-default: #3EC372;
  --icon-warning-default: #F0851F;
  --icon-error-default: #EB5757;
  /* current icon/error/default of the design library; --icon-error-default above still carries
     the older red the notification badges are drawn with, so both names stay side by side */
  --icon-error-strong: #D62C2C;
  --icon-fuschsia-default: #C062D3;

  /* border colors */
  --border-neutral-light-default: #DAE3EB;
  --border-neutral-light-disabled: #EBF0F4;
  --border-neutral-light-hover: #C3D1DE;
  --border-neutral-white-hover: #DCE2FD;
  --border-neutral-white-pressed: #C0CDFD;
  --border-primary-disabled: #C0CDFD;
  --border-primary-default: #3652F1;
  --border-error-default: #EB5757;

  /* surface colors */
  --surface-secondary-light: #F4F7F9;

  /* main menu (semantic: a brand may colour these differently from the palette) */
  --main-menu-bg: #0E0E32;
  --main-menu-item-color: #C0CDFD;
  --main-menu-item-active-color: #6483F6;
  --main-menu-item-active-bg: #212487;
  --mobile-menu-bg: #0E0E32;
  --mobile-menu-button-color: #6483F6;

  /* dashboard switcher (semantic: no palette token holds these values) */
  --dashboard-switcher-menu-btn-hover-bg: #C4CEFC;
  --dashboard-switcher-menu-btn-active-bg: #ACBAFA;
  --dashboards-list-item-selected-bg: #EFF2FF;
  --metric-addition-banner-icon-color: #4563FF;
  --dashboard-illustration-panel-bg: #EFF2FF;

  /* search highlight, users management, profile (semantic: a brand may colour these differently from the palette) */
  --search-highlight-color: #3652F1;
  --users-management-avatar-bg: var(--icon-neutral-primary);
  --profile-banner-bg: #EFF2FF;

  /* dark dropdown menu (semantic: a brand may colour this differently from the palette) */
  --dropdown-dark-item-active-bg: var(--dark);

  /* marketing banners (semantic: no palette token holds these values) */
  --marketing-banner-primary: #016DFF;
  --marketing-banner-primary-hover: #0058d6;
  --marketing-banner-secondary-hover: #c8d2fb;
  --marketing-banner-text: #112363;
  --marketing-banner-gradient-end: #cfe3fc;
}