@import './fonts/IBMPlexSans.css';
@import './fonts/IBMPlexMono.css';
@import './fonts/MaterialIcons.css';
@import './reset.css';


html {
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
  font-family: 'IBM Plex Sans', 'Segoe UI', 'Roboto', sans-serif;
}

.jui-theme--rects {
  --fw-h1: 400;
  --f-icon: 'Material Icons';

  --border-radius-1: 3px;
  --border-radius-2: 5px;
  --border-radius-3: 7px;

  --shadow-2: 3px 3px 0 0 rgba(174,175,185,0.80);
  --shadow-3: 5px 5px 0 0 rgba(174,175,185,0.80);
}

.jui-theme--rects .jui-theme__computed {
  --c-accent-1: #3D2E22;
  --c-accent-2: #805A3D;
  --c-accent-3: #B88156;
  --c-accent-4: #D6A47C;
  --c-accent-5: #DCB799;
  --c-accent-6: #F2E0D0;

  --c-light-1: var(--c-white);
  --c-light-2: #F2F3F7;
  --c-light-3: #E1E1E5;
  --c-light-4: #CECED6;
  --c-light-5: rgba(var(--c-light-rgb), 0.5);
  --c-light-6: rgba(var(--c-light-rgb), 0.3);

  --c-grey-1: #24252E;
  --c-grey-2: #595961;
  --c-grey-3: #7E7F88;
  --c-grey-4: #9A9CAA;
  --c-grey-5: #AEAFB9;
  --c-grey-6: #CECED6;

  --c-dark-1: #393D61;
  --c-dark-2: #505383;
  --c-dark-3: #6767AA;
  --c-dark-4: #8788BC;
  --c-dark-5: #A9A9CC;
  --c-dark-6: #CACADC;

  --c-link: var(--c-accent-3);
  --c-link-hover: var(--c-accent-2);
  --c-button-link: var(--c-accent-3);
  --c-button-link-hover: var(--c-accent-2);

  --c-input: var(--c-accent-2);
  --c-input-focus: var(--c-accent-1);
  --c-input-bg: var(--c-accent-6);
  --c-input-focus-bg: var(--c-accent-5);

  --c-placeholder: var(--c-accent-3);

  --c-button: var(--c-accent-3);
  --c-button-primary: var(--c-accent-2);

  --c-button-light: var(--c-light-4);
  --c-button-light-icon: var(--c-accent-4);
  --c-button-light-hover: var(--c-light-1);
  --c-button-light-primary: var(--c-light-1);
  --c-button-light-primary-icon: var(--c-accent-4);
}

.jui-theme--rects .jui-field__label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--padding-xs);
}

.jui-theme--rects .jui-field__input {
  padding: var(--padding-s);
}

.jui-theme--rects .jui-field__frame {
  background: var(--c-input-bg);
}
.jui-theme--rects .jui-field__frame:focus-within {
  background: var(--c-input-focus-bg);
}

.jui-theme--rects .jui-text--header-h3,
.jui-theme--rects .jui-text--header-h5 {
  text-transform: uppercase;
}
