/** Base Styles */
:root {
  /**
   * Colors
   * --------------------------------------------------------------------- */
  --c-bg: #fff;
  --c-bg-semi: rgba(255, 255, 255, 0.8);
  --c-bg-secondary: #f3f5f7;

  --c-white: #ffffff;
  --c-black: #000000;

  --c-divider-light: rgba(60, 60, 67, 0.12);
  --c-divider-dark: rgba(84, 84, 88, 0.48);

  --c-text-light-1: #2c3e50;
  --c-text-light-2: #476582;
  --c-text-light-3: #90a4b7;

  --c-brand: #3eaf7c;
  --c-brand-active: #37a372;
  --c-brand-dark: #30855e;
  --c-brand-light: #4abf8a;

  --c-disabled-bg: #e5e5e5;
  --c-disabled-fg: #666;

  --code-bg-color: #f8f8f8;
  --code-inline-bg-color: rgba(27, 31, 35, 0.04);
  --code-highlight: rgba(0, 0, 0, 0.04);

  /**
   * Typography
   * --------------------------------------------------------------------- */

  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;

  /**
   * Z Indexes
   *
   * Algolia SearchBox has a z-index of 200, so make sure not to go above
   * that value.
   * --------------------------------------------------------------------- */

  --z-index-navbar: 10;
  --z-index-sidebar: 6;

  /**
   * Shadows
   * --------------------------------------------------------------------- */

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
  --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);

  /**
   * Sizes
   * --------------------------------------------------------------------- */

  --header-height: 3.6rem;
  --sidebar-width: 17.5rem;
  --scrollbar-width: 6px;
}

html.dark {
  --c-bg: #111;
  --c-bg-semi: rgba(17, 17, 17, 0.8);
  --c-bg-secondary: #222;
  --c-text: #f0f6fc;
  --c-text-light: #f0f6fc;
  --c-text-lighter: #ffffff;

  --c-divider-light: rgba(200, 200, 200, 0.12);
  --c-divider-dark: rgba(200, 200, 200, 0.48);
  --code-bg-color: #191919;
  --code-inline-bg-color: rgba(255, 255, 255, 0.04);
  --code-highlight: rgba(0, 0, 0, 0.66);

  --c-disabled-bg: #333;
  --c-disabled-fg: #aaa;
}

/** Fallback Styles */
:root {
  --c-divider: var(--c-divider-light);

  --c-text: var(--c-text-light-1);
  --c-text-light: var(--c-text-light-2);
  --c-text-lighter: var(--c-text-light-3);

  --c-bg: var(--c-white);

  --code-line-height: 24px;
  --code-font-family: var(--font-family-mono);
  --code-font-size: 14px;
}
