/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;500;600;700&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'); */

/* .test-content {} */

:root {

  --color-bg-main: #F2F5F9;
  --color-fg-main: #444;

  --color-bg-contrast: #fff;
  --color-fg-contrast: #000;

  --color-fg-accent: rgb(242, 100, 42);
  --color-bg-accent: rgb(242 100 42 / 10%);

  --color-accent: #274466;
  --color-highlight: rgb(255, 255, 200);
  --color-highlight-secondary: rgb(230, 236, 242);

  --color-fg-secondary: rgba(0, 0, 0, .5);
  --color-bg-secondary: rgba(0, 0, 0, .025);

  --color-fg-secondary-invert: rgb(255 255 255 / 50%);
  --color-bg-secondary-invert: rgb(0 0 0 / 10%);

  --color-bg-ui: #282c42;

  --color-red: rgb(200, 0, 0);
  --color-blue: rgb(50, 100, 200);
  --color-green: rgb(0, 100, 100);

  --color-danger: var(--color-red);
  --color-cancel: var(--color-fg-secondary);
  --color-submit: var(--color-action);

  --color-link: var(--color-fg-secondary);
  --color-action: var(--color-fg-accent);
  --color-hover: var(--color-fg-contrast);

  --color-border: rgba(0,0,0,.1);
  --color-placeholder: rgba(0,0,0,.25);

  --base-border: 1px solid var(--color-border);
  --code-border-color: var(--color-border);

  --scrollbarBG: transparent;
  --thumbBG: rgba(0,0,0,.05);

  --base-rhythm: 8px;

  --base-font-size: calc(var(--base-rhythm)*2);
  --base-line-height: 1.6;

  --font-size: var(--base-font-size);

  --font-size-l: 1.25rem;
  --font-size-sm: 0.8125rem;
  --font-size-xsm: 0.75rem;
  --font-size-xxsm: 11px;
  --code-font-size: .85em;

  --base-font-family: 'Noto Sans', sans-serif;
  --code-font-family: 'Noto Sans Mono', consolas, monaco, monospace;
  /*
    DEV NOTE: To use system fonts,
    uncomment the following two variables, replacing the previous two:
  */
  /* --base-font-family: ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  /* --code-font-family: monospace; */

  --base-gap: calc(var(--base-rhythm)*6);
  --tree-gap: calc(var(--base-rhythm)*4);
  --base-padding: calc(var(--base-rhythm)*2);

  --base-elevation-0: 0 0 0 rgba(0,0,0,0);
  --base-elevation-node: 0 0 16px rgba(0,0,0,.1);
  --base-elevation-modal: 0 0 32px rgba(0,0,0,.32);

  --main-elevation-shadow: inset 8px 8px 16px rgba(0,0,0,.2);
  --base-elevation: 0 0 16px rgba(0,0,0,.2);

  --traceability-arrow: 1.25rem;

  --card-width: 300px;
}

body {
  margin: 0;
  padding: 0;

  font-family: var(--base-font-family);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  color: var(--color-fg-main);
  background-color: var(--color-bg-main);
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  /* font-stretch: 100%; */
  font-display: swap;
  src: url('./fonts/NotoSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100 900;
  /* font-stretch: 100%; */
  font-display: swap;
  src: url('./fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 100 900;
  /* font-stretch: 100%; */
  font-display: swap;
  src: url('./fonts/NotoSansMono-VariableFont_wdth,wght.ttf') format('truetype-variations');
}

* { box-sizing: border-box; }

sdoc-scope {
  display: contents;
}

/* scrollbar */

* {
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
::-webkit-scrollbar:horizontal,
::-webkit-scrollbar:vertical,
::-webkit-scrollbar,
::-webkit-scrollbar-track:horizontal,
::-webkit-scrollbar-track:vertical,
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background-color: var(--scrollbarBG);
}
::-webkit-scrollbar-thumb:horizontal,
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG)
  /*
  background-color: var(--scrollbarBG);
  border: 3px solid var(--thumbBG);
  border-radius: 6px;
  */
}