/* stylelint-disable custom-property-pattern -- RainbowKit does not use kebab-case */
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --quick-nav-display: none;
  --component-highlights-item-width: calc(100vw - 100px);
  --developer-experience-code-window-background: var(--slate-12);

  /* Palette */
  --palette-bg: #ffffff;
  --palette-bg-soft-black: #141519;
  --palette-bg-white: #fff;
  --palette-dark: #3a3042;
  --palette-primary: #ff784f;

  /* Build Onchain Apps shared variables */
  --boat-color-background: var(--palette-bg);

  /* Indicates that the element can be rendered using 
   * the operating system dark color scheme. 
   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme */
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  color: var(--palette-dark);
}

html .font-title {
  /* font-family: 'Londrina Solid'; */
  font-family: var(--font-title);
  font-weight: 400;
}

html .font-slogan {
  /* font-family: 'Londrina Solid'; */
  font-family: var(--font-title);
  font-weight: 100;
}

html .text-primary {
  color: var(--palette-primary);
}

html .text-dark {
  color: var(--palette-dark);
}

html .bg-primary {
  background-color: var(--palette-primary);
}

html .font-normal {
  font-family: var(--font-normal);
}

html .bg-light {
  background-color: var(--palette-bg);
}

html .bg-dark {
  background-color: var(--palette-dark);
}

html .wrapped {
  border: var(--palette-primary) 3px solid;
  border-radius: 10px;
}

div .wrapped-filled {
  /* background-color: var(--palette-primary); */
  color: var(--palette-bg);
  border-radius: 10px;
}

/* div .wrapped :focus {
  background-color: var(--palette-primary);
  color: var(--palette-bg);
} */

body {
  height: 100%;
  margin: 0;
  background-color: var(--boat-color-background);
  color: var(--boat-color-text);
  /* font-family: Nunito, sans-serif; */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a {
  text-decoration: underline;
}

svg {
  display: block;
  overflow: visible;
  vertical-align: middle;
}

ul {
  padding-inline-start: 0;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-feature-settings: normal;
  font-size: 14px;
  font-variation-settings: normal;
}

/* stylelint-disable-next-line */
#__next {
  position: relative;
  z-index: 0;
}

[data-overlay-container='true'] {
  height: 100%;
  width: 100%;
}
