/*
 * Intelligency Studio themes for Twenty CRM.
 *
 * Visual source: the LinkedIn banner's deep space, electric blue and violet.
 * Product translation: cool low-chroma surfaces, restrained brand accents and
 * readable text for long CRM sessions. Loaded after Twenty's built-in themes.
 */

:root {
  --theme-light-background-secondary: #f2f5fc;
  --theme-dark-background-secondary: #0f1628;
}

html.light {
  color-scheme: light;

  --t-buttons-secondary-text-color: #3652b8;

  --t-accent-primary: #cbd9ff;
  --t-accent-secondary: #cbd9ff;
  --t-accent-tertiary: #e9efff;
  --t-accent-quaternary: #f4f7ff;
  --t-accent-accent3570: #7896f2;
  --t-accent-accent4060: #7896f2;
  --t-accent-accent1: #fafbff;
  --t-accent-accent2: #f4f7ff;
  --t-accent-accent3: #e9efff;
  --t-accent-accent4: #dce6ff;
  --t-accent-accent5: #cbd9ff;
  --t-accent-accent6: #b5c9ff;
  --t-accent-accent7: #98b1ff;
  --t-accent-accent8: #7896f2;
  --t-accent-accent9: #4866d8;
  --t-accent-accent10: #3e5dcb;
  --t-accent-accent11: #304cb2;
  --t-accent-accent12: #1d2a5b;
  --t-color-blue: #4866d8;
  --t-color-blue1: #fafbff;
  --t-color-blue2: #f4f7ff;
  --t-color-blue3: #e9efff;
  --t-color-blue4: #dce6ff;
  --t-color-blue5: #cbd9ff;
  --t-color-blue6: #b5c9ff;
  --t-color-blue7: #98b1ff;
  --t-color-blue8: #7896f2;
  --t-color-blue9: #4866d8;
  --t-color-blue10: #3e5dcb;
  --t-color-blue11: #304cb2;
  --t-color-blue12: #1d2a5b;

  --t-background-noisy:
    radial-gradient(circle at 86% 10%, rgb(79 111 229 / 12%), transparent 34%),
    radial-gradient(circle at 70% -8%, rgb(117 100 240 / 8%), transparent 28%),
    linear-gradient(160deg, #f7f9ff 0%, #f1f4fc 100%);
  --t-background-primary: #f7f9ff;
  --t-background-secondary: #f2f5fc;
  --t-background-tertiary: #e8edf7;
  --t-background-quaternary: #dde5f2;
  --t-background-inverted-primary: #202840;
  --t-background-inverted-secondary: #4d5b78;
  --t-background-transparent-primary: rgb(247 249 255 / 78%);
  --t-background-transparent-secondary: rgb(247 249 255 / 64%);
  --t-background-transparent-strong: rgb(21 32 61 / 16%);
  --t-background-transparent-medium: rgb(21 32 61 / 9%);
  --t-background-transparent-light: rgb(21 32 61 / 5.5%);
  --t-background-transparent-lighter: rgb(21 32 61 / 3%);
  --t-background-transparent-blue: rgb(79 111 229 / 11%);
  --t-background-overlay-primary: rgb(7 13 31 / 72%);
  --t-background-overlay-secondary: rgb(7 13 31 / 38%);
  --t-background-overlay-tertiary: rgb(7 13 31 / 9%);
  --t-background-radial-gradient: radial-gradient(
    50% 62.62% at 50% 0%,
    #6b7892 0%,
    #4d5b78 100%
  );
  --t-background-radial-gradient-hover: radial-gradient(
    76.32% 95.59% at 50% 0%,
    #5d6b87 0%,
    #34425f 100%
  );
  --t-background-primary-inverted: #202840;
  --t-background-primary-inverted-hover: #34425f;

  --t-border-color-strong: #c3cee1;
  --t-border-color-medium: #d7dfed;
  --t-border-color-light: #e5eaf4;
  --t-border-color-secondary-inverted: #4d5b78;
  --t-border-color-inverted: #202840;
  --t-border-color-blue: #7896f2;
  --t-border-color-transparent-strong: rgb(21 32 61 / 10%);
  --t-box-shadow-color: rgb(20 31 59 / 7%);

  --t-font-color-primary: #202840;
  --t-font-color-secondary: #4d5b78;
  --t-font-color-tertiary: #606d87;
  --t-font-color-light: #65718a;
  --t-font-color-extra-light: #65718a;
  --t-font-color-inverted: #ffffff;

  --t-gray-scale-gray1: #f7f9ff;
  --t-gray-scale-gray2: #f2f5fc;
  --t-gray-scale-gray3: #edf1f9;
  --t-gray-scale-gray4: #e8edf7;
  --t-gray-scale-gray5: #dde5f2;
  --t-gray-scale-gray6: #c3cee1;
  --t-gray-scale-gray7: #b3bfd4;
  --t-gray-scale-gray8: #909db5;
  --t-gray-scale-gray9: #6f7c95;
  --t-gray-scale-gray10: #606d87;
  --t-gray-scale-gray11: #4d5b78;
  --t-gray-scale-gray12: #202840;
}

html.dark {
  color-scheme: dark;

  --t-buttons-secondary-text-color: #aebeff;

  --t-accent-primary: #1c315f;
  --t-accent-secondary: #1c315f;
  --t-accent-tertiary: #14254a;
  --t-accent-quaternary: #101d38;
  --t-accent-accent3570: #6f8df0;
  --t-accent-accent4060: #6f8df0;
  --t-accent-accent1: #0d1427;
  --t-accent-accent2: #101d38;
  --t-accent-accent3: #14254a;
  --t-accent-accent4: #18305d;
  --t-accent-accent5: #1c3a70;
  --t-accent-accent6: #254887;
  --t-accent-accent7: #345aa1;
  --t-accent-accent8: #486fbd;
  --t-accent-accent9: #4866d8;
  --t-accent-accent10: #405cc8;
  --t-accent-accent11: #aebeff;
  --t-accent-accent12: #dfe6ff;
  --t-color-blue: #4866d8;
  --t-color-blue1: #0d1427;
  --t-color-blue2: #101d38;
  --t-color-blue3: #14254a;
  --t-color-blue4: #18305d;
  --t-color-blue5: #1c3a70;
  --t-color-blue6: #254887;
  --t-color-blue7: #345aa1;
  --t-color-blue8: #486fbd;
  --t-color-blue9: #4866d8;
  --t-color-blue10: #405cc8;
  --t-color-blue11: #aebeff;
  --t-color-blue12: #dfe6ff;

  --t-background-noisy:
    radial-gradient(circle at 86% 10%, rgb(71 118 255 / 19%), transparent 35%),
    radial-gradient(circle at 69% -8%, rgb(117 100 240 / 12%), transparent 29%),
    linear-gradient(160deg, #0b1020 0%, #0f1628 100%);
  --t-background-primary: #0b1020;
  --t-background-secondary: #0f1628;
  --t-background-tertiary: #151e33;
  --t-background-quaternary: #1b2742;
  --t-background-inverted-primary: #eaf0ff;
  --t-background-inverted-secondary: #b8c4dd;
  --t-background-transparent-primary: rgb(5 9 19 / 56%);
  --t-background-transparent-secondary: rgb(5 9 19 / 42%);
  --t-background-transparent-strong: rgb(234 240 255 / 15%);
  --t-background-transparent-medium: rgb(234 240 255 / 10%);
  --t-background-transparent-light: rgb(234 240 255 / 6%);
  --t-background-transparent-lighter: rgb(234 240 255 / 3.5%);
  --t-background-transparent-blue: rgb(105 137 255 / 24%);
  --t-background-overlay-primary: rgb(2 5 13 / 78%);
  --t-background-overlay-secondary: rgb(2 5 13 / 48%);
  --t-background-overlay-tertiary: rgb(2 5 13 / 24%);
  --t-background-radial-gradient: radial-gradient(
    50% 62.62% at 50% 0%,
    #d3dcf2 0%,
    #aebbd7 100%
  );
  --t-background-radial-gradient-hover: radial-gradient(
    76.32% 95.59% at 50% 0%,
    #eaf0ff 0%,
    #c2cce3 100%
  );
  --t-background-primary-inverted: #eaf0ff;
  --t-background-primary-inverted-hover: #c2cce3;

  --t-border-color-strong: #33425f;
  --t-border-color-medium: #24314d;
  --t-border-color-light: #1c2843;
  --t-border-color-secondary-inverted: #b8c4dd;
  --t-border-color-inverted: #eaf0ff;
  --t-border-color-blue: #5579d1;
  --t-border-color-transparent-strong: rgb(234 240 255 / 10%);
  --t-box-shadow-color: rgb(0 3 12 / 58%);

  --t-font-color-primary: #eaf0ff;
  --t-font-color-secondary: #b8c4dd;
  --t-font-color-tertiary: #929fbb;
  --t-font-color-light: #8492af;
  --t-font-color-extra-light: #7c8aa8;
  --t-font-color-inverted: #0b1020;

  --t-gray-scale-gray1: #0b1020;
  --t-gray-scale-gray2: #0f1628;
  --t-gray-scale-gray3: #121a2d;
  --t-gray-scale-gray4: #151e33;
  --t-gray-scale-gray5: #1b2742;
  --t-gray-scale-gray6: #33425f;
  --t-gray-scale-gray7: #667694;
  --t-gray-scale-gray8: #8492af;
  --t-gray-scale-gray9: #929fbb;
  --t-gray-scale-gray10: #a5b1cb;
  --t-gray-scale-gray11: #b8c4dd;
  --t-gray-scale-gray12: #eaf0ff;
}

html.light body,
html.dark body {
  background-color: var(--t-background-secondary);
}

html.light ::selection,
html.dark ::selection {
  color: var(--t-font-color-primary);
  background: var(--t-accent-tertiary);
}