:root {
  font-size: 16px;
}

:root {
  --color-background:        hsl(130, 20%, 95%);
  --color-background-opaque: hsla(130, 20%, 95%, 50%);
  --color-primary:           hsl(0, 0%, 15%);
  --color-secondary:         hsl(0, 0%, 45%);
  --color-shadow:            #cccccc;
  --color-curtain:           #00000099;
  --color-note-contents:     #ffffff;
  --color-todo:              gold;
  --color-link:              mediumblue;
  --color-visited:           purple;
  --color-active:            #ff3300;
  --color-marker-inside:     #ff3300;
  --color-marker-border:     white;
  --color-icon:              var(--color-secondary);
  --color-file-extension:    var(--color-shadow);
  --color-allowed:           #00cc99;
  --color-forbidden:         #ff3300;
}

:root {
  --background-card-meta: linear-gradient(138deg, rgba(251,223,181,1) 0%, rgba(236,245,193,1) 50%, rgba(242,217,239,1) 100%);
}

:root {
  --size-large:  2.3rem;
  --size-double: calc(var(--size-medium) * 2);
  --size-medium: calc(var(--size-large)  / 2.5);
  --size-small:  calc(var(--size-medium) / 2);
  --size-tiny:   calc(var(--size-small)  / 2);
}

:root {
  --margin-width: minmax(0, calc((100vw - 1em * 70) / 2));
}

:root {
  --zindex-basic: 10050;
  --zindex-curtain: 10055;
  --zindex-modal: 10060;
}

:root {
  --font-default: normal 100% system-ui, sans-serif;
  --font-header-nav: italic 100% system-ui, sans-serif;
  --font-link-note: normal 100% system-ui, sans-serif;
  --font-label: italic bold 100% system-ui, sans-serif;
  --font-heading: italic larger Cambria, Georgia, serif;
  --font-icon: normal 100% NotoEmoji;
  --font-file-extension: normal small-caps 100% system-ui, sans-serif;
  --font-code: normal 88% monospace;
  --font-cite: italic smaller system-ui, sans-serif;
  --font-map: normal 75% system-ui, sans-serif;
}

:root {
  --common-box-shadow: 0 3px 0 var(--color-shadow), -2px 0 0 var(--color-shadow) inset;
  --common-border-radius: var(--size-tiny);
  --common-gap: var(--size-medium);
  --common-gap-with-smaller-vertical: var(--size-small) var(--size-medium);
  --common-pseudolink-text-decoration: underline dotted 1px;
  --common-pseudolink-text-decoration-line: underline;
  --common-pseudolink-text-decoration-style: dotted;
  --common-pseudolink-text-decoration-thickness: 1px;
  --common-pseudolink-text-underline-offset: .25ex;
}

@font-face {
  font-family: "NotoEmoji";
  src: url("../../../common/fonts/NotoEmoji-Regular.ttf");
}