:root{
  /* sizes */
  --size-3x-small:1rem;
  --size-2x-small:1.25rem;
  --size-x-small:1.5rem;
  --size-small:2rem;
  --size-medium:2.5rem;
  --size-large:3rem;
  --size-x-large:3.5rem;
  --size-2x-large:4rem;
  --size-3x-large:4.5rem;

  /* control borders */
  --control-border-width:1px;
  --control-border-style:solid;

  /* checkbox | switch | radio */
  --control-choice-small:round(calc(1rem * var(--scaling)),2px);
  --control-choice-medium:round(calc(1.25rem * var(--scaling)),2px);
  --control-choice-large:round(calc(1.5rem * var(--scaling)),2px);

  /* button */
  --control-action-small:2rem;
  --control-action-medium:2.5rem;
  --control-action-large:3rem;

  --control-action-font-size-small:0.875rem;
  --control-action-font-size-medium:1rem;
  --control-action-font-size-large:1.125rem;

  /* padding */
  --padding-x-small:0.5rem;
  --padding-small:0.75rem;
  --padding-medium:1rem;
  --padding-large:1.25rem;
  --padding-x-large:1.5rem;

  /* icon sizes */
  --icon-x-small:1rem;
  --icon-small:1.125rem;
  --icon-medium:1.25rem;
  --icon-large:1.375rem;
  --icon-x-large:1.5rem;

  /* rounded */
  --rounded-base:0.5rem;
  --rounded-full:calc(infinity * 1px);
  --rounded-none:0;

  /* duration */
  --duration-fast:0.075s;
  --duration-normal:0.15s;
  --duration-slow:0.25s;
  --duration-default:var(--duration-normal);

  /* outline focus */
  --outline-focus-width:2px;
  --outline-focus-style:solid;
  --outline-focus-offset:2px;

  /* cursor */
  --cursor-default:default;
  --cursor-interactive:pointer;
  --cursor-disabled:not-allowed;

  /* link */
  --decoration-line:underline;
  --decoration-style:dashed;
  --decoration-thickness:1px;

  /* underline offset */
  --underline-offset:0.2rem;
}

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

html,body{
  margin:0;
  padding:0;
}

body{
  font-family:var(--font-family-body);
  font-size:var(--font-size-default);
  font-weight:var(--font-weight-normal);
  font-style:var(--font-style-normal);
  line-height:var(--line-height-default);
}

:is(h1,h2,h3,h4,h5,h6){
  margin:0;
  color:var(--heading-color);
  font-family:var(--font-family-heading);
  font-style:var(--font-style-normal);
}

:is(h1,h2,h3){font-weight:var(--font-weight-semibold);}
:is(h4,h5,h6){font-weight:var(--font-weight-medium);}

:is(h1,h2,h3,h4,h5,h6) ~ :is(h2,h3,h4,h5,h6){
  margin-block-start:calc(2.5rem * var(--scaling));
}

h1{
  line-height:1.1;
  font-size:calc(2.5rem * var(--scaling));
  margin-block-end:calc(1rem * var(--scaling));
}

h2{
  line-height:1.15;
  font-size:calc(2rem * var(--scaling));
  margin-block-end:calc(0.875rem * var(--scaling));
}

h3{
  line-height:1.2;
  font-size:calc(1.5rem * var(--scaling));
  margin-block-end:calc(0.75rem * var(--scaling));
}

h4{
  line-height:1.25;
  font-size:calc(1.25rem * var(--scaling));
  margin-block-end:calc(0.625rem * var(--scaling));
}

h5{
  line-height:1.3;
  font-size:calc(1.125rem * var(--scaling));
  margin-block-end:calc(0.5rem * var(--scaling));
}

h6{
  line-height:1.35;
  font-size:calc(1rem * var(--scaling));
  margin-block-end:calc(0.375rem * var(--scaling));
}



p{
  margin:0;
  padding:0;
}

pre,code{
  tab-size:var(--tab-size-default);
}

pre{
  margin:0;
  padding:0;
}

code{
  font-family:var(--font-family-code);
  font-weight:var(--font-weight-normal);
  font-style:var(--font-style-normal);
  white-space:pre-wrap;
  word-break:break-word;
}

table{
  border:none;
  border-collapse:collapse;
  border-spacing:0;
  text-align:left;
  vertical-align:top;
}

strong{
  font-weight:var(--font-weight-bold);
  font-style:inherit;
}

em{
  font-style:var(--font-style-italic);
}

u{
  text-decoration-line:underline;
  text-underline-offset:var(--underline-offset);
}

s{
  text-decoration-line:line-through;
}

blockquote{
  margin:0;
  padding:0;
  font-style:var(--font-style-italic);
}

ul,ol{
  margin:0;
  padding-inline-start:1.5rem;
}

dl,dt,dd{
  margin:0;
  padding:0;
}

summary{
  touch-action:manipulation;
}

img,picture,video,canvas,svg,iframe{
  display:block;
  max-width:100%;
}

img,picture,video{height:auto;}
iframe{width:100%;border:none;}

figure{
  margin:0;
  padding:0;
}

::-webkit-scrollbar{
  width:0.5rem;
  height:0.5rem;
}

::-webkit-scrollbar-thumb{
  cursor:var(--cursor-default);
  background-color:var(--scrollbar-color);
  border-radius:var(--rounded-full);
}

::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-corner{display:none;}

::selection{
  background-color:var(--selection-color);
}

select,
summary,
input:is(
[type="range"],
[type="file"]){
  -webkit-tap-highlight-color:transparent;
}

/* forms */
label{
  display:flex;
  align-items:center;
  gap:1rem;
  user-select:none;
  cursor:var(--cursor-interactive);

  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

select{
  cursor:var(--cursor-interactive);
}