/* Recommended Tools
    Check accessibility for color combinations
    https://toolness.github.io/accessible-color-matrix/
*/

@font-face {
  font-family: 'fa-solid';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src:
    url('/blog/css/fa/webfonts/fa-solid-900.woff2') format('woff2'),
    url('/blog/css/fa/webfonts/fa-solid-900.ttf') format('truetype');
}

@font-face {
  font-family: 'fa-brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src:
    url('/blog/css/fa/webfonts/fa-brands-400.woff2') format('woff2'),
    url('/blog/css/fa/webfonts/fa-brands-400.ttf') format('truetype');
}

:root {
  --page-inline-margin: 2rem;

  /* Theme colors */
  --black: #000000ff;
  --white: #ffffffff;

  --navy-700: #2e475dff;
  --navy-600: #3e607dff;
  --navy-400: #7c98b4ff;
  --navy-300: #a9bbcbff;
  --navy-200: #dae2e9ff;
  --navy-100: #f4f6f8ff;

  --blue-500: #1a77ca;
  --blue-200: #cde4f7;
  --blue-100: #f2f8fd;
  --blue-qqq: #fafdff;

  /* TODO: remove green-400 as it's being used in one place only */
  --green-400: #00ab62;
  --green: #00e693ff;
  --light-green: #00ffa3ff;

  --red-500: #d63d3d;

  --orange-400: #ea7325;

  --blue-midnight-dark: #070e14ff;
  --blue-midnight-darker: #0a202fff;
  --blue-midnight: #10212fff;
  --blue-midnight-lighter: #22425cff;

  --blue-grey-dark: #152b3dff;
  --blue-gray-darker: #1f2f3cff;
  --blue-grey-medium: #113049ff;
  --blue-grey: var(--navy-700);
  --blue-grey-light: #274b66ff;
  --blue-grey-lighter: #557999ff;
  --blue-grey-smoke: #c5e6ff66;

  --grey: #555555ff; /* #777777 is low contrast (WCAG) */
  --grey-light: #eef0f2ff;
  --grey-lighter: var(--navy-100);

  --font-size-xxlarge: 1.625rem;
  --font-size-xlarge: 1.5rem;
  --font-size-large: 1.25rem;
  --font-size-regular: 1.125rem;
  --font-size-medium: 1rem;
  --font-size-small: 0.875rem;
  /* New heading sizes from old Blog */
  --font-size-h1: 2.75rem;
  --font-size-h2: 2.25rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1rem;

  --color-base-primary: var(--white);

  --color-text: var(--blue-midnight);
  --color-heading: var(--blue-grey-dark);
  --color-text-secondary: var(--navy-700);

  --color-subtitle: var(--navy-600);
  --font-size-subtitle: var(--font-size-large);
  --font-size-title: var(--font-size-xxlarge);

  --border-color-header: var(--navy-200);

  --color-menu-link: var(--navy-600);
  --color-menu-link-active: var(--navy-700);
  --color-menu-link-alt: var(--blue-500);
  --color-menu-marker: var(--navy-300);
  --bg-color-menu: var(--blue-qqq);
  --bg-color-menu-open: rgba(13, 128, 216, 0.1);
  --border-color-menu-open: var(--navy-200);
  --gap-menu: 0.6em;

  --navigation-width: 21.25rem;

  --bg-color-tab: var(--navy-200);
  --border-color-tab: var(--navy-200);
  --border-color-tab-active: var(--navy-400);

  --color-hint: #124164;
  --bg-color-hint: var(--lightest-blue);
  --border-color-hint: var(--blue-500);

  --color-info: #124164;
  --bg-color-info: var(--lightest-blue);
  --border-color-info: var(--blue-500);

  --color-success: #04502f;
  --bg-color-success: #e8ffeb;
  --border-color-success: #00b065;

  --color-warning: #a23623;
  --bg-color-warning: #fefae9;
  --border-color-warning: #fc8431;

  --color-problem: #931919;
  --bg-color-problem: #fff2ee;
  --border-color-problem: #ff4848;

  --duration-default: 300ms;

  --code-color: var(--color-text);
  --code-background: var(--blue-100);

  /* Backgrounds TODO - update with design system */
  --background-light: var(--blue-100);
  --background-default: var(--white);

  /* Borders TODO - update with design system */
  --border-default-color: var(--blue-200);

  /* Separator */
  --separator-color: #dae2e9;

  /* Scrollbar */
  --scrollbar-color: #a9bbcb;

  /* Icon Tile */
  --icon-tile-border: var(--border-default-color);
  --icon-tile-border-hover: var(--border-default-color);
  --icon-tile-background: var(--background-light);
  --icon-tile-background-hover: var(--background-default);
  --icon-tile-shadow: 0px 4px 10px 0px rgba(13, 128, 216, 0.2);

  /* Article header */
  --header-separator-color: var(--navy-200);
  --header-icon-border: var(--border-default-color);
  --header-icon-background: var(--background-light);

  /* Button */
  --button-primary: var(--green);
  --button-primary-focus: var(--light-green);
  --button-primary-text: var(--blue-grey-medium);
  --button-ring-color: rgba(0, 255, 163, 0.5);

  /* Search variables */
  --search-height: 3rem;
  --search-border-radius: calc(var(--search-height) / 2);
  --search-results-padding: 1rem;
  --search-border: 0.0625rem solid #76a1c2;
  --search-dropdown-height: 60vh;
  --search-dropdown-duration: var(--duration-default);
  --search-placeholder-color: #173b56;
  --search-remove-icon-color: #355670;
  --search-overlay: rgba(12, 26, 36, 0.3);
  --navbar-icon-size: 3rem;

  /* Hamburger menu */
  --hamburger-line-width: 1.5rem;
  --hamburger-line-height: 0.2rem;
  --hamburger-line-margin: 0.2rem;
  --hamburger-translate-y: calc(
    var(--hamburger-line-height) + var(--hamburger-line-margin)
  );
  --hamburger-lines-color: var(--blue-grey-light);

  /* Theme Switcher */
  --theme-switcher-border: var(--navy-200);

  /* Badge */
  --badge-background: rgba(162, 209, 244, 0.2);
  --badge-color: #0d80d8;

  /* Card */
  --card-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
  --card-related-topics-shadow: 0px 10px 35px 0px rgba(133, 152, 165, 0.1);
  --card-related-topics-hover-shadow: 0px 10px 35px 0px
    rgba(133, 152, 165, 0.25);

  /* To be checked and cleaned */

  --octo-blue: var(--blue-500);
  --lightest-blue: #e5f4ffff;
  --octo-blue-lighter: #2f95e3ff;
  --octo-blue-lightest: #1fc0ffff;

  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family: var(--font-family-system);
  --heading-font: var(--font-family);
  --body-font: var(--font-family);
  --bold-font: var(--font-family);
  --code-font: Consolas, monaco, monospace;

  --header-bg: var(--white);
  --header-icon-stroke: var(--blue-grey-light);
  --header-link-color: var(--octo-blue);
  --header-link-alt: var(--blue-gray-darker);
  --header-link-alt-bg: var(--blue-grey-smoke);

  --image-bg: var(--blue-grey-smoke);
  --content-bg: var(--white);

  --body-link-color: var(--octo-blue);
  --body-link-alt: var(--blue-grey-light);
  --menu-link-bg: var(--blue-grey-smoke);
  --footer-link-color: var(--navy-200);

  --icon-stroke: var(--white);
  --icon-fill: var(--blue-grey-light);

  --octopus-logo-text-color: #0f2535;

  --block-gap: 2rem;

  --header-pin: 0;
  --scroll-pad: 140px;

  --box-shadow: 4px 0px 8px rgba(0, 0, 0, 0.25);
  --octo-shadow-standard-box: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
  --octo-shadow-standard-box-hover: 0 2px 6px 0 rgba(0, 0, 0, 0.4);

  --content-width: 78vw;
  --content-width-mobile: calc(100vw - 4rem);
  --toc-width: 250px;
  --grid-max-width: 1250px;
  --grid-gap: 1rem;
  --grid-gap-main: 1rem;

  --standard-radius: 0.5rem;
}

@media (max-width: 860px) {
  :root {
    --page-inline-margin: 1rem;
  }
}

html[data-theme='dark'] {
  --color-base-primary: #10202e;
  --color-menu-link: var(--navy-300);
  --color-menu-link-active: var(--navy-100);
  --bg-color-menu: #0c1a24;
  --bg-color-menu-open: var(--blue-grey-dark);
  --border-color-menu-open: var(--navy-700);
  --header-bg: var(--blue-grey-dark);
  --color-text: #dae2e9ff;
  --color-heading: var(--white);
  --color-subtitle: #f5f6f8;
  --body-link-alt: var(--white);
  --search-placeholder-color: var(--navy-400);
  --search-remove-icon-color: var(--white);
  --grey-lighter: var(--blue-grey-dark);
  /* TODO: update this */
  --navy-200: #314c62;
  --octo-blue: var(--octo-blue-lightest);
  --border-color-header: var(--navy-700);
  /* TODO: update this */
  --blue-grey: #dae2e9ff;
  --header-link-alt: var(--color-text);
  --grey-light: var(--navy-700);
  --color-menu-link-alt: var(--octo-blue-lightest);
  --body-link-color: var(--octo-blue-lightest);
  --octopus-logo-text-color: var(--white);
  --theme-switcher-border: var(--navy-700);
  --color-hint: var(--color-text);
  --bg-color-hint: rgba(13, 128, 216, 0.1);
  --color-info: var(--color-text);
  --bg-color-info: var(--blue-grey-light);
  --hamburger-lines-color: var(--white);
  --footer-link-color: var(--color-menu-link);
  --search-overlay: rgba(12, 26, 36, 0.8);
  --header-separator-color: var(--navy-700);
  --header-icon-border: transparent;
  --header-icon-background: var(--blue-grey-dark);
  --badge-background: rgba(31, 192, 255, 0.1);
  --badge-color: var(--octo-blue-lightest);
  --color-text-secondary: #dae2e9;
  --icon-tile-background: #132838;
  --icon-tile-background-hover: #223950;
  --icon-tile-border: #1c3f59;
  --icon-tile-border-hover: var(--octo-blue-lightest);
  --icon-tile-shadow: 0px 6px 20px 0px var(--bg-color-menu);
  --separator-color: var(--navy-700);
  --code-background: #0c1a24;
  --scrollbar-color: var(--navy-300);
}